Successful callback of $http is executing twice instead of once - Java script
0
I need to generate and print checkboxes based on JSON feed for books object. So far I tried the following. There are four objects in the datalist array. In HTML, four check boxes should be created for books. But instead eight checkboxes are getting created. Any help would be much appreciated.
JSON
[{
"books" : {
"contents" : [
{
"title" : "Book1",
"type" : "CHECKBOX"
},
{
"title" : "Book2",
"type" : "CHECKBOX"
},
{
"title" : "Book3",
"type" : "CHECKBOX",
},
{
"title" : "Book4",
"type" : "CHECKBOX",
}
]
}
"storybooks" : {
"contents" : [
{
"title" : "Book1",
"type" : "CHECKBOX"
},
{
"title" : "Book2",
"type" : "CHECKBOX"
},
{
"title" : "Book3",
"type" : "CHECKBOX",
},
{
"title" : "Book4",
"type" : "CHECKBOX",
}
]
}
}]
app.js
var datalist = ;
$http({
method: 'GET',
url: 'json.json'
})
.then(function successCallback(data) {
$scope.data = data.data;
datalist = $scope.data;
for (var i = 0; i < datalist.length; i ++) {
console.log(datalist[i]);
}
$scope.data.map(function (item) {
item.content = item.book.contents;
datalist = item.content;
datalist.forEach((c, index) => {
var btn = document.createElement('input');
btn.type = 'checkbox';
document.getElementById('mydiv').appendChild(btn);
});
});
}, function errorCallback(response) {
console.log(response);
console.log('error');
});
HTML
<div id="mydiv">
</div>
javascript arrays json http callback
asked Nov 16 '18 at 7:09
MishtyMishty
417
add a comment |
0
I need to generate and print checkboxes based on JSON feed for books object. So far I tried the following. There are four objects in the datalist array. In HTML, four check boxes should be created for books. But instead eight checkboxes are getting created. Any help would be much appreciated.
JSON
[{
"books" : {
"contents" : [
{
"title" : "Book1",
"type" : "CHECKBOX"
},
{
"title" : "Book2",
"type" : "CHECKBOX"
},
{
"title" : "Book3",
"type" : "CHECKBOX",
},
{
"title" : "Book4",
"type" : "CHECKBOX",
}
]
}
"storybooks" : {
"contents" : [
{
"title" : "Book1",
"type" : "CHECKBOX"
},
{
"title" : "Book2",
"type" : "CHECKBOX"
},
{
"title" : "Book3",
"type" : "CHECKBOX",
},
{
"title" : "Book4",
"type" : "CHECKBOX",
}
]
}
}]
app.js
var datalist = ;
$http({
method: 'GET',
url: 'json.json'
})
.then(function successCallback(data) {
$scope.data = data.data;
datalist = $scope.data;
for (var i = 0; i < datalist.length; i ++) {
console.log(datalist[i]);
}
$scope.data.map(function (item) {
item.content = item.book.contents;
datalist = item.content;
datalist.forEach((c, index) => {
var btn = document.createElement('input');
btn.type = 'checkbox';
document.getElementById('mydiv').appendChild(btn);
});
});
}, function errorCallback(response) {
console.log(response);
console.log('error');
});
HTML
<div id="mydiv">
</div>
javascript arrays json http callback
asked Nov 16 '18 at 7:09
MishtyMishty
417
can you make a code snippet?
– Santosh
Nov 16 '18 at 11:02
add a comment |
0
0
0
0
I need to generate and print checkboxes based on JSON feed for books object. So far I tried the following. There are four objects in the datalist array. In HTML, four check boxes should be created for books. But instead eight checkboxes are getting created. Any help would be much appreciated.
JSON
[{
"books" : {
"contents" : [
{
"title" : "Book1",
"type" : "CHECKBOX"
},
{
"title" : "Book2",
"type" : "CHECKBOX"
},
{
"title" : "Book3",
"type" : "CHECKBOX",
},
{
"title" : "Book4",
"type" : "CHECKBOX",
}
]
}
"storybooks" : {
"contents" : [
{
"title" : "Book1",
"type" : "CHECKBOX"
},
{
"title" : "Book2",
"type" : "CHECKBOX"
},
{
"title" : "Book3",
"type" : "CHECKBOX",
},
{
"title" : "Book4",
"type" : "CHECKBOX",
}
]
}
}]
app.js
var datalist = ;
$http({
method: 'GET',
url: 'json.json'
})
.then(function successCallback(data) {
$scope.data = data.data;
datalist = $scope.data;
for (var i = 0; i < datalist.length; i ++) {
console.log(datalist[i]);
}
$scope.data.map(function (item) {
item.content = item.book.contents;
datalist = item.content;
datalist.forEach((c, index) => {
var btn = document.createElement('input');
btn.type = 'checkbox';
document.getElementById('mydiv').appendChild(btn);
});
});
}, function errorCallback(response) {
console.log(response);
console.log('error');
});
HTML
<div id="mydiv">
</div>
javascript arrays json http callback
asked Nov 16 '18 at 7:09
MishtyMishty
417
I need to generate and print checkboxes based on JSON feed for books object. So far I tried the following. There are four objects in the datalist array. In HTML, four check boxes should be created for books. But instead eight checkboxes are getting created. Any help would be much appreciated.
JSON
[{
"books" : {
"contents" : [
{
"title" : "Book1",
"type" : "CHECKBOX"
},
{
"title" : "Book2",
"type" : "CHECKBOX"
},
{
"title" : "Book3",
"type" : "CHECKBOX",
},
{
"title" : "Book4",
"type" : "CHECKBOX",
}
]
}
"storybooks" : {
"contents" : [
{
"title" : "Book1",
"type" : "CHECKBOX"
},
{
"title" : "Book2",
"type" : "CHECKBOX"
},
{
"title" : "Book3",
"type" : "CHECKBOX",
},
{
"title" : "Book4",
"type" : "CHECKBOX",
}
]
}
}]
app.js
var datalist = ;
$http({
method: 'GET',
url: 'json.json'
})
.then(function successCallback(data) {
$scope.data = data.data;
datalist = $scope.data;
for (var i = 0; i < datalist.length; i ++) {
console.log(datalist[i]);
}
$scope.data.map(function (item) {
item.content = item.book.contents;
datalist = item.content;
datalist.forEach((c, index) => {
var btn = document.createElement('input');
btn.type = 'checkbox';
document.getElementById('mydiv').appendChild(btn);
});
});
}, function errorCallback(response) {
console.log(response);
console.log('error');
});
HTML
<div id="mydiv">
</div>
javascript arrays json http callback
javascript arrays json http callback
asked Nov 16 '18 at 7:09
MishtyMishty
417
asked Nov 16 '18 at 7:09
MishtyMishty
417
edited Nov 16 '18 at 9:32
Mishty
asked Nov 16 '18 at 7:09
MishtyMishty
417
asked Nov 16 '18 at 7:09
MishtyMishty
417
asked Nov 16 '18 at 7:09
MishtyMishty
417
417
can you make a code snippet?
– Santosh
Nov 16 '18 at 11:02
add a comment |
can you make a code snippet?
– Santosh
Nov 16 '18 at 11:02
can you make a code snippet?
– Santosh
Nov 16 '18 at 11:02
can you make a code snippet?
– Santosh
Nov 16 '18 at 11:02
add a comment |
2 Answers
2
active
oldest
votes
0
I think you were accessing the data incorrectly.
Here is a simplified version:
$http({
method: 'GET',
url: 'json.json'
})
.then(data => {
const myDiv = document.getElementById('mydiv')
data.books.contents.forEach(b => {
const btn = document.createElement('input')
btn.type = 'checkbox'
myDiv.appendChild(btn)
})
})
.catch(err => {
console.log('error', err)
})
answered Nov 16 '18 at 7:59
Ty KrollTy Kroll
1,039822
Actually JSON has two objects namely books and storybooks. Edited the question with storybooks
– Mishty
Nov 16 '18 at 12:10
Should be fine if you only use books. Edited a bit
– Ty Kroll
Nov 17 '18 at 1:50
add a comment |
0
Improvised @Try Kroll's suggestion
var count = 0;
http({
method: 'GET',
url: 'json.json'
})
.then(data => {
if(count==0){
const myDiv = document.getElementById('myDiv')
data.data.books.contents.forEach(b => {
const btn = document.createElement('input')
btn.type = 'checkbox'
perhiscontainer.appendChild(btn)
})
count = count+1;
}
})
.catch(err => {
console.log('error', err)
})
answered Nov 17 '18 at 6:32
MishtyMishty
417
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53333036%2fsuccessful-callback-of-http-is-executing-twice-instead-of-once-java-script%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
I think you were accessing the data incorrectly.
Here is a simplified version:
$http({
method: 'GET',
url: 'json.json'
})
.then(data => {
const myDiv = document.getElementById('mydiv')
data.books.contents.forEach(b => {
const btn = document.createElement('input')
btn.type = 'checkbox'
myDiv.appendChild(btn)
})
})
.catch(err => {
console.log('error', err)
})
answered Nov 16 '18 at 7:59
Ty KrollTy Kroll
1,039822
Actually JSON has two objects namely books and storybooks. Edited the question with storybooks
– Mishty
Nov 16 '18 at 12:10
Should be fine if you only use books. Edited a bit
– Ty Kroll
Nov 17 '18 at 1:50
add a comment |
0
I think you were accessing the data incorrectly.
Here is a simplified version:
$http({
method: 'GET',
url: 'json.json'
})
.then(data => {
const myDiv = document.getElementById('mydiv')
data.books.contents.forEach(b => {
const btn = document.createElement('input')
btn.type = 'checkbox'
myDiv.appendChild(btn)
})
})
.catch(err => {
console.log('error', err)
})
answered Nov 16 '18 at 7:59
Ty KrollTy Kroll
1,039822
Actually JSON has two objects namely books and storybooks. Edited the question with storybooks
– Mishty
Nov 16 '18 at 12:10
Should be fine if you only use books. Edited a bit
– Ty Kroll
Nov 17 '18 at 1:50
add a comment |
0
0
0
I think you were accessing the data incorrectly.
Here is a simplified version:
$http({
method: 'GET',
url: 'json.json'
})
.then(data => {
const myDiv = document.getElementById('mydiv')
data.books.contents.forEach(b => {
const btn = document.createElement('input')
btn.type = 'checkbox'
myDiv.appendChild(btn)
})
})
.catch(err => {
console.log('error', err)
})
answered Nov 16 '18 at 7:59
Ty KrollTy Kroll
1,039822
I think you were accessing the data incorrectly.
Here is a simplified version:
$http({
method: 'GET',
url: 'json.json'
})
.then(data => {
const myDiv = document.getElementById('mydiv')
data.books.contents.forEach(b => {
const btn = document.createElement('input')
btn.type = 'checkbox'
myDiv.appendChild(btn)
})
})
.catch(err => {
console.log('error', err)
})
answered Nov 16 '18 at 7:59
Ty KrollTy Kroll
1,039822
edited Nov 17 '18 at 1:52
answered Nov 16 '18 at 7:59
Ty KrollTy Kroll
1,039822
answered Nov 16 '18 at 7:59
Ty KrollTy Kroll
1,039822
answered Nov 16 '18 at 7:59
Ty KrollTy Kroll
1,039822
1,039822
Actually JSON has two objects namely books and storybooks. Edited the question with storybooks
– Mishty
Nov 16 '18 at 12:10
Should be fine if you only use books. Edited a bit
– Ty Kroll
Nov 17 '18 at 1:50
add a comment |
Actually JSON has two objects namely books and storybooks. Edited the question with storybooks
– Mishty
Nov 16 '18 at 12:10
Should be fine if you only use books. Edited a bit
– Ty Kroll
Nov 17 '18 at 1:50
Actually JSON has two objects namely books and storybooks. Edited the question with storybooks
– Mishty
Nov 16 '18 at 12:10
Actually JSON has two objects namely books and storybooks. Edited the question with storybooks
– Mishty
Nov 16 '18 at 12:10
Should be fine if you only use books. Edited a bit
– Ty Kroll
Nov 17 '18 at 1:50
Should be fine if you only use books. Edited a bit
– Ty Kroll
Nov 17 '18 at 1:50
add a comment |
0
Improvised @Try Kroll's suggestion
var count = 0;
http({
method: 'GET',
url: 'json.json'
})
.then(data => {
if(count==0){
const myDiv = document.getElementById('myDiv')
data.data.books.contents.forEach(b => {
const btn = document.createElement('input')
btn.type = 'checkbox'
perhiscontainer.appendChild(btn)
})
count = count+1;
}
})
.catch(err => {
console.log('error', err)
})
answered Nov 17 '18 at 6:32
MishtyMishty
417
add a comment |
0
Improvised @Try Kroll's suggestion
var count = 0;
http({
method: 'GET',
url: 'json.json'
})
.then(data => {
if(count==0){
const myDiv = document.getElementById('myDiv')
data.data.books.contents.forEach(b => {
const btn = document.createElement('input')
btn.type = 'checkbox'
perhiscontainer.appendChild(btn)
})
count = count+1;
}
})
.catch(err => {
console.log('error', err)
})
answered Nov 17 '18 at 6:32
MishtyMishty
417
add a comment |
0
0
0
Improvised @Try Kroll's suggestion
var count = 0;
http({
method: 'GET',
url: 'json.json'
})
.then(data => {
if(count==0){
const myDiv = document.getElementById('myDiv')
data.data.books.contents.forEach(b => {
const btn = document.createElement('input')
btn.type = 'checkbox'
perhiscontainer.appendChild(btn)
})
count = count+1;
}
})
.catch(err => {
console.log('error', err)
})
answered Nov 17 '18 at 6:32
MishtyMishty
417
Improvised @Try Kroll's suggestion
var count = 0;
http({
method: 'GET',
url: 'json.json'
})
.then(data => {
if(count==0){
const myDiv = document.getElementById('myDiv')
data.data.books.contents.forEach(b => {
const btn = document.createElement('input')
btn.type = 'checkbox'
perhiscontainer.appendChild(btn)
})
count = count+1;
}
})
.catch(err => {
console.log('error', err)
})
answered Nov 17 '18 at 6:32
MishtyMishty
417
answered Nov 17 '18 at 6:32
MishtyMishty
417
answered Nov 17 '18 at 6:32
MishtyMishty
417
answered Nov 17 '18 at 6:32
MishtyMishty
417
417
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53333036%2fsuccessful-callback-of-http-is-executing-twice-instead-of-once-java-script%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
can you make a code snippet?
– Santosh
Nov 16 '18 at 11:02