.append in Jquery shows undefined
0
$("#clckjson").click(function() {
$(document).ready(function() {
$.getJSON("fuelj.json", function(data) {
$(data).each(function(i, item) {
console.log(item.stationID);
var $table = $('<table>');
$table.append("<thead>").children("thead")
.append("<tr/>").children("tr").append("<th>StationID</th><th>Distance</th><th>Address</th><th>H24</th><th>Phones</th><th>FuelTypeID</th><th>FuelPrice</th><th>PriceTimestamp</th><th>FuelName</th>");
var $tbody = $table.append("<tbody/>").children("tbody");
$tbody.append("<tr/>").children("tr:last")
.append("<td>").append(item.stationID)
.append("<td>").append(item.distance)
.append("<td>").append(item.address)
.append("<td>").append(item.value)
.append("<td>").append(item.phone)
.append("<td>").append(item.fuelTypeID)
.append("<td>").append(item.price)
.append("<td>").append(item.priceTimeStamp)
.append("<td>").append(item.fuel);
$table.appendTo('#stationtb');
});
});
});
});
I have an html page with a div a button and a table inside and with jQuery I want to add cells dynamically with JSON objects in the table and when I press the button everything to show up. The problem now is that when I press the button the table shows up just fine but the items I try to append do not show at all and console.log shows undefined. May I have some help?
javascript jquery json html-table
edited Nov 16 '18 at 18:16
Juan Castillo
3,48732835
asked Nov 16 '18 at 16:42
GeorgeKemeGeorgeKeme
11
add a comment |
0
$("#clckjson").click(function() {
$(document).ready(function() {
$.getJSON("fuelj.json", function(data) {
$(data).each(function(i, item) {
console.log(item.stationID);
var $table = $('<table>');
$table.append("<thead>").children("thead")
.append("<tr/>").children("tr").append("<th>StationID</th><th>Distance</th><th>Address</th><th>H24</th><th>Phones</th><th>FuelTypeID</th><th>FuelPrice</th><th>PriceTimestamp</th><th>FuelName</th>");
var $tbody = $table.append("<tbody/>").children("tbody");
$tbody.append("<tr/>").children("tr:last")
.append("<td>").append(item.stationID)
.append("<td>").append(item.distance)
.append("<td>").append(item.address)
.append("<td>").append(item.value)
.append("<td>").append(item.phone)
.append("<td>").append(item.fuelTypeID)
.append("<td>").append(item.price)
.append("<td>").append(item.priceTimeStamp)
.append("<td>").append(item.fuel);
$table.appendTo('#stationtb');
});
});
});
});
I have an html page with a div a button and a table inside and with jQuery I want to add cells dynamically with JSON objects in the table and when I press the button everything to show up. The problem now is that when I press the button the table shows up just fine but the items I try to append do not show at all and console.log shows undefined. May I have some help?
javascript jquery json html-table
edited Nov 16 '18 at 18:16
Juan Castillo
3,48732835
asked Nov 16 '18 at 16:42
GeorgeKemeGeorgeKeme
11
1
You're not appending to the tds. Look at the process you go through to append the trs and then append to the trs (similar to the tbody and thead appending). You broke your process when you got to the tds.
– Taplar
Nov 16 '18 at 16:44
1
Those append lines. are not doing what you think it is doing
– epascarello
Nov 16 '18 at 16:44
I would highly recommend trying to remove the creation of markup from your javascript and use a template instead. If your application is doing this a lot, you should also look into possible incorporating a templating library as well.
– Taplar
Nov 16 '18 at 16:45
1
Also, your document ready is pointless, as it's in a click handler.
– Taplar
Nov 16 '18 at 16:46
add a comment |
0
0
0
$("#clckjson").click(function() {
$(document).ready(function() {
$.getJSON("fuelj.json", function(data) {
$(data).each(function(i, item) {
console.log(item.stationID);
var $table = $('<table>');
$table.append("<thead>").children("thead")
.append("<tr/>").children("tr").append("<th>StationID</th><th>Distance</th><th>Address</th><th>H24</th><th>Phones</th><th>FuelTypeID</th><th>FuelPrice</th><th>PriceTimestamp</th><th>FuelName</th>");
var $tbody = $table.append("<tbody/>").children("tbody");
$tbody.append("<tr/>").children("tr:last")
.append("<td>").append(item.stationID)
.append("<td>").append(item.distance)
.append("<td>").append(item.address)
.append("<td>").append(item.value)
.append("<td>").append(item.phone)
.append("<td>").append(item.fuelTypeID)
.append("<td>").append(item.price)
.append("<td>").append(item.priceTimeStamp)
.append("<td>").append(item.fuel);
$table.appendTo('#stationtb');
});
});
});
});
I have an html page with a div a button and a table inside and with jQuery I want to add cells dynamically with JSON objects in the table and when I press the button everything to show up. The problem now is that when I press the button the table shows up just fine but the items I try to append do not show at all and console.log shows undefined. May I have some help?
javascript jquery json html-table
edited Nov 16 '18 at 18:16
Juan Castillo
3,48732835
asked Nov 16 '18 at 16:42
GeorgeKemeGeorgeKeme
11
$("#clckjson").click(function() {
$(document).ready(function() {
$.getJSON("fuelj.json", function(data) {
$(data).each(function(i, item) {
console.log(item.stationID);
var $table = $('<table>');
$table.append("<thead>").children("thead")
.append("<tr/>").children("tr").append("<th>StationID</th><th>Distance</th><th>Address</th><th>H24</th><th>Phones</th><th>FuelTypeID</th><th>FuelPrice</th><th>PriceTimestamp</th><th>FuelName</th>");
var $tbody = $table.append("<tbody/>").children("tbody");
$tbody.append("<tr/>").children("tr:last")
.append("<td>").append(item.stationID)
.append("<td>").append(item.distance)
.append("<td>").append(item.address)
.append("<td>").append(item.value)
.append("<td>").append(item.phone)
.append("<td>").append(item.fuelTypeID)
.append("<td>").append(item.price)
.append("<td>").append(item.priceTimeStamp)
.append("<td>").append(item.fuel);
$table.appendTo('#stationtb');
});
});
});
});
I have an html page with a div a button and a table inside and with jQuery I want to add cells dynamically with JSON objects in the table and when I press the button everything to show up. The problem now is that when I press the button the table shows up just fine but the items I try to append do not show at all and console.log shows undefined. May I have some help?
javascript jquery json html-table
javascript jquery json html-table
edited Nov 16 '18 at 18:16
Juan Castillo
3,48732835
asked Nov 16 '18 at 16:42
GeorgeKemeGeorgeKeme
11
edited Nov 16 '18 at 18:16
Juan Castillo
3,48732835
asked Nov 16 '18 at 16:42
GeorgeKemeGeorgeKeme
11
edited Nov 16 '18 at 18:16
Juan Castillo
3,48732835
edited Nov 16 '18 at 18:16
Juan Castillo
3,48732835
edited Nov 16 '18 at 18:16
Juan Castillo
3,48732835
3,48732835
asked Nov 16 '18 at 16:42
GeorgeKemeGeorgeKeme
11
asked Nov 16 '18 at 16:42
GeorgeKemeGeorgeKeme
11
asked Nov 16 '18 at 16:42
GeorgeKemeGeorgeKeme
11
11
1
You're not appending to the tds. Look at the process you go through to append the trs and then append to the trs (similar to the tbody and thead appending). You broke your process when you got to the tds.
– Taplar
Nov 16 '18 at 16:44
1
Those append lines. are not doing what you think it is doing
– epascarello
Nov 16 '18 at 16:44
I would highly recommend trying to remove the creation of markup from your javascript and use a template instead. If your application is doing this a lot, you should also look into possible incorporating a templating library as well.
– Taplar
Nov 16 '18 at 16:45
1
Also, your document ready is pointless, as it's in a click handler.
– Taplar
Nov 16 '18 at 16:46
add a comment |
1
You're not appending to the tds. Look at the process you go through to append the trs and then append to the trs (similar to the tbody and thead appending). You broke your process when you got to the tds.
– Taplar
Nov 16 '18 at 16:44
1
Those append lines. are not doing what you think it is doing
– epascarello
Nov 16 '18 at 16:44
I would highly recommend trying to remove the creation of markup from your javascript and use a template instead. If your application is doing this a lot, you should also look into possible incorporating a templating library as well.
– Taplar
Nov 16 '18 at 16:45
1
Also, your document ready is pointless, as it's in a click handler.
– Taplar
Nov 16 '18 at 16:46
1
1
You're not appending to the tds. Look at the process you go through to append the trs and then append to the trs (similar to the tbody and thead appending). You broke your process when you got to the tds.
– Taplar
Nov 16 '18 at 16:44
You're not appending to the tds. Look at the process you go through to append the trs and then append to the trs (similar to the tbody and thead appending). You broke your process when you got to the tds.
– Taplar
Nov 16 '18 at 16:44
1
1
Those append lines. are not doing what you think it is doing
– epascarello
Nov 16 '18 at 16:44
Those append lines. are not doing what you think it is doing
– epascarello
Nov 16 '18 at 16:44
I would highly recommend trying to remove the creation of markup from your javascript and use a template instead. If your application is doing this a lot, you should also look into possible incorporating a templating library as well.
– Taplar
Nov 16 '18 at 16:45
I would highly recommend trying to remove the creation of markup from your javascript and use a template instead. If your application is doing this a lot, you should also look into possible incorporating a templating library as well.
– Taplar
Nov 16 '18 at 16:45
1
1
Also, your document ready is pointless, as it's in a click handler.
– Taplar
Nov 16 '18 at 16:46
Also, your document ready is pointless, as it's in a click handler.
– Taplar
Nov 16 '18 at 16:46
add a comment |
1 Answer
1
active
oldest
votes
0
If data is an array, you need to correct the way to iterate it.
$.each(data, function(i, item) {
answered Nov 16 '18 at 18:12
Santiago PernigottiSantiago Pernigotti
1315
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%2f53342078%2fappend-in-jquery-shows-undefined%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
If data is an array, you need to correct the way to iterate it.
$.each(data, function(i, item) {
answered Nov 16 '18 at 18:12
Santiago PernigottiSantiago Pernigotti
1315
add a comment |
0
If data is an array, you need to correct the way to iterate it.
$.each(data, function(i, item) {
answered Nov 16 '18 at 18:12
Santiago PernigottiSantiago Pernigotti
1315
add a comment |
0
0
0
If data is an array, you need to correct the way to iterate it.
$.each(data, function(i, item) {
answered Nov 16 '18 at 18:12
Santiago PernigottiSantiago Pernigotti
1315
If data is an array, you need to correct the way to iterate it.
$.each(data, function(i, item) {
answered Nov 16 '18 at 18:12
Santiago PernigottiSantiago Pernigotti
1315
answered Nov 16 '18 at 18:12
Santiago PernigottiSantiago Pernigotti
1315
answered Nov 16 '18 at 18:12
Santiago PernigottiSantiago Pernigotti
1315
answered Nov 16 '18 at 18:12
Santiago PernigottiSantiago Pernigotti
1315
1315
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%2f53342078%2fappend-in-jquery-shows-undefined%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
1
You're not appending to the tds. Look at the process you go through to append the trs and then append to the trs (similar to the tbody and thead appending). You broke your process when you got to the tds.
– Taplar
Nov 16 '18 at 16:44
1
Those append lines. are not doing what you think it is doing
– epascarello
Nov 16 '18 at 16:44
I would highly recommend trying to remove the creation of markup from your javascript and use a template instead. If your application is doing this a lot, you should also look into possible incorporating a templating library as well.
– Taplar
Nov 16 '18 at 16:45
1
Also, your document ready is pointless, as it's in a click handler.
– Taplar
Nov 16 '18 at 16:46