Mixing
how can i iterate through my object and display table rows in format
I have to use the .getJson method to download a file and display it on the page. I need help displaying rows in tables format, my code displays but its all over the page.
$(document).ready(function () {
$.getJSON("data.json", function (data) {
var topSpot = '';
$.each(data, function (key, value) {
$("table").append("<tr>");
$("table").append("<td>" + value.name + "</td>");
$("table").append("<td>" + value.description + "</td>");
$("table").append("<td>" + value.link + "</td>");
var link = 'https://www.google.com/maps?q=' + value.location[0] + ',' +
value.location[1];
topSpot += '<td>' + '<a class="btn" href="' + link + '">Google Maps
location</a > ' + '</td > ';
topSpot += '</tr>';
});
$('#table').append(topSpot);
});
});
javascript
edited Nov 22 '18 at 3:46
dhilt
7,99742142
asked Nov 22 '18 at 3:21
juniorjunior
205
add a comment |
I have to use the .getJson method to download a file and display it on the page. I need help displaying rows in tables format, my code displays but its all over the page.
$(document).ready(function () {
$.getJSON("data.json", function (data) {
var topSpot = '';
$.each(data, function (key, value) {
$("table").append("<tr>");
$("table").append("<td>" + value.name + "</td>");
$("table").append("<td>" + value.description + "</td>");
$("table").append("<td>" + value.link + "</td>");
var link = 'https://www.google.com/maps?q=' + value.location[0] + ',' +
value.location[1];
topSpot += '<td>' + '<a class="btn" href="' + link + '">Google Maps
location</a > ' + '</td > ';
topSpot += '</tr>';
});
$('#table').append(topSpot);
});
});
javascript
edited Nov 22 '18 at 3:46
dhilt
7,99742142
asked Nov 22 '18 at 3:21
juniorjunior
205
1
You need to think of the DOM as a tree, not as a sequence of HTML elements.
– Robby Cornelissen
Nov 22 '18 at 3:23
add a comment |
I have to use the .getJson method to download a file and display it on the page. I need help displaying rows in tables format, my code displays but its all over the page.
$(document).ready(function () {
$.getJSON("data.json", function (data) {
var topSpot = '';
$.each(data, function (key, value) {
$("table").append("<tr>");
$("table").append("<td>" + value.name + "</td>");
$("table").append("<td>" + value.description + "</td>");
$("table").append("<td>" + value.link + "</td>");
var link = 'https://www.google.com/maps?q=' + value.location[0] + ',' +
value.location[1];
topSpot += '<td>' + '<a class="btn" href="' + link + '">Google Maps
location</a > ' + '</td > ';
topSpot += '</tr>';
});
$('#table').append(topSpot);
});
});
javascript
edited Nov 22 '18 at 3:46
dhilt
7,99742142
asked Nov 22 '18 at 3:21
juniorjunior
205
I have to use the .getJson method to download a file and display it on the page. I need help displaying rows in tables format, my code displays but its all over the page.
$(document).ready(function () {
$.getJSON("data.json", function (data) {
var topSpot = '';
$.each(data, function (key, value) {
$("table").append("<tr>");
$("table").append("<td>" + value.name + "</td>");
$("table").append("<td>" + value.description + "</td>");
$("table").append("<td>" + value.link + "</td>");
var link = 'https://www.google.com/maps?q=' + value.location[0] + ',' +
value.location[1];
topSpot += '<td>' + '<a class="btn" href="' + link + '">Google Maps
location</a > ' + '</td > ';
topSpot += '</tr>';
});
$('#table').append(topSpot);
});
});
javascript
javascript
edited Nov 22 '18 at 3:46
dhilt
7,99742142
asked Nov 22 '18 at 3:21
juniorjunior
205
edited Nov 22 '18 at 3:46
dhilt
7,99742142
asked Nov 22 '18 at 3:21
juniorjunior
205
edited Nov 22 '18 at 3:46
dhilt
7,99742142
edited Nov 22 '18 at 3:46
dhilt
7,99742142
edited Nov 22 '18 at 3:46
dhilt
7,99742142
7,99742142
asked Nov 22 '18 at 3:21
juniorjunior
205
asked Nov 22 '18 at 3:21
juniorjunior
205
asked Nov 22 '18 at 3:21
juniorjunior
205
205
1
You need to think of the DOM as a tree, not as a sequence of HTML elements.
– Robby Cornelissen
Nov 22 '18 at 3:23
add a comment |
1
You need to think of the DOM as a tree, not as a sequence of HTML elements.
– Robby Cornelissen
Nov 22 '18 at 3:23
1
1
You need to think of the DOM as a tree, not as a sequence of HTML elements.
– Robby Cornelissen
Nov 22 '18 at 3:23
You need to think of the DOM as a tree, not as a sequence of HTML elements.
– Robby Cornelissen
Nov 22 '18 at 3:23
add a comment |
2 Answers
2
active
oldest
votes
I think major reason its all over the page is lack of correct css classes getting applied on the html table that you are generating. To Fix Create the div container with right type of properties and place the table inside it using $('#table').append(topSpot) and also apply css on table elements. There are multiple plugins which provides controlled table output with multiple features like sorting, searching, editing and so on e.g. http://tabulator.info/ or simple plugin like jsontotable which you can explore,
<div id="jsontotable" class="jsontotable"></div>
var data = [{'Title1': 'Hello', 'Title2': 'Fine', 'Title3': 'Thank you'}, {'Title1': 'Hello', 'Title2': 'Fine', 'Title3': 'Thank you'}];
$.jsontotable(data, { id: '#jsontotable', header: false });
answered Nov 22 '18 at 5:30
MukundMukund
16816
I tried your advice but couldn't get it to work. maybe I'm doing it wrong!
– junior
Nov 25 '18 at 2:57
See my code displays but i cant seem to get it to display in the correct format! My code is al over the page
– junior
Nov 25 '18 at 2:59
add a comment |
In these cases you can use Template literals, you can achieve results I think a little easier to read. Please consider the following example.
Edit: In order to use $.getJSON in the implementation, I edited the answer, I am getting data from https://jsonplaceholder.typicode.com/ for simplicity. The logic is almost the same. The difference here is to execute the render logic inside a $.getJSON callback.
function render() {
$.getJSON('https://jsonplaceholder.typicode.com/posts', function(data) {
const output = document.querySelector('#output');
const rows = data.map(toTableRows).join('');
output.innerHTML = `<table>
<tbody>${rows}</tbody>
</table>`;
});
}
function toTableRows(data) {
return `
<tr>
<td>${data.title}</td>
<td>${data.body}</td>
</tr>`;
}
render();<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="output"></div>
</body>
</html>answered Nov 22 '18 at 3:45
user615274user615274
1,52211222
very Good example, but I need to use the .getjson to download a file, then populate the data stored in it, my outcome should be in table row format
– junior
Nov 25 '18 at 2:24
I just edited the answer.
– user615274
Nov 25 '18 at 17:26
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
});
}
});
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%2f53423411%2fhow-can-i-iterate-through-my-object-and-display-table-rows-in-format%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
I think major reason its all over the page is lack of correct css classes getting applied on the html table that you are generating. To Fix Create the div container with right type of properties and place the table inside it using $('#table').append(topSpot) and also apply css on table elements. There are multiple plugins which provides controlled table output with multiple features like sorting, searching, editing and so on e.g. http://tabulator.info/ or simple plugin like jsontotable which you can explore,
<div id="jsontotable" class="jsontotable"></div>
var data = [{'Title1': 'Hello', 'Title2': 'Fine', 'Title3': 'Thank you'}, {'Title1': 'Hello', 'Title2': 'Fine', 'Title3': 'Thank you'}];
$.jsontotable(data, { id: '#jsontotable', header: false });
answered Nov 22 '18 at 5:30
MukundMukund
16816
I tried your advice but couldn't get it to work. maybe I'm doing it wrong!
– junior
Nov 25 '18 at 2:57
See my code displays but i cant seem to get it to display in the correct format! My code is al over the page
– junior
Nov 25 '18 at 2:59
add a comment |
I think major reason its all over the page is lack of correct css classes getting applied on the html table that you are generating. To Fix Create the div container with right type of properties and place the table inside it using $('#table').append(topSpot) and also apply css on table elements. There are multiple plugins which provides controlled table output with multiple features like sorting, searching, editing and so on e.g. http://tabulator.info/ or simple plugin like jsontotable which you can explore,
<div id="jsontotable" class="jsontotable"></div>
var data = [{'Title1': 'Hello', 'Title2': 'Fine', 'Title3': 'Thank you'}, {'Title1': 'Hello', 'Title2': 'Fine', 'Title3': 'Thank you'}];
$.jsontotable(data, { id: '#jsontotable', header: false });
answered Nov 22 '18 at 5:30
MukundMukund
16816
I tried your advice but couldn't get it to work. maybe I'm doing it wrong!
– junior
Nov 25 '18 at 2:57
See my code displays but i cant seem to get it to display in the correct format! My code is al over the page
– junior
Nov 25 '18 at 2:59
add a comment |
I think major reason its all over the page is lack of correct css classes getting applied on the html table that you are generating. To Fix Create the div container with right type of properties and place the table inside it using $('#table').append(topSpot) and also apply css on table elements. There are multiple plugins which provides controlled table output with multiple features like sorting, searching, editing and so on e.g. http://tabulator.info/ or simple plugin like jsontotable which you can explore,
<div id="jsontotable" class="jsontotable"></div>
var data = [{'Title1': 'Hello', 'Title2': 'Fine', 'Title3': 'Thank you'}, {'Title1': 'Hello', 'Title2': 'Fine', 'Title3': 'Thank you'}];
$.jsontotable(data, { id: '#jsontotable', header: false });
answered Nov 22 '18 at 5:30
MukundMukund
16816
I think major reason its all over the page is lack of correct css classes getting applied on the html table that you are generating. To Fix Create the div container with right type of properties and place the table inside it using $('#table').append(topSpot) and also apply css on table elements. There are multiple plugins which provides controlled table output with multiple features like sorting, searching, editing and so on e.g. http://tabulator.info/ or simple plugin like jsontotable which you can explore,
<div id="jsontotable" class="jsontotable"></div>
var data = [{'Title1': 'Hello', 'Title2': 'Fine', 'Title3': 'Thank you'}, {'Title1': 'Hello', 'Title2': 'Fine', 'Title3': 'Thank you'}];
$.jsontotable(data, { id: '#jsontotable', header: false });
answered Nov 22 '18 at 5:30
MukundMukund
16816
answered Nov 22 '18 at 5:30
MukundMukund
16816
answered Nov 22 '18 at 5:30
MukundMukund
16816
answered Nov 22 '18 at 5:30
MukundMukund
16816
16816
I tried your advice but couldn't get it to work. maybe I'm doing it wrong!
– junior
Nov 25 '18 at 2:57
See my code displays but i cant seem to get it to display in the correct format! My code is al over the page
– junior
Nov 25 '18 at 2:59
add a comment |
I tried your advice but couldn't get it to work. maybe I'm doing it wrong!
– junior
Nov 25 '18 at 2:57
See my code displays but i cant seem to get it to display in the correct format! My code is al over the page
– junior
Nov 25 '18 at 2:59
I tried your advice but couldn't get it to work. maybe I'm doing it wrong!
– junior
Nov 25 '18 at 2:57
I tried your advice but couldn't get it to work. maybe I'm doing it wrong!
– junior
Nov 25 '18 at 2:57
See my code displays but i cant seem to get it to display in the correct format! My code is al over the page
– junior
Nov 25 '18 at 2:59
See my code displays but i cant seem to get it to display in the correct format! My code is al over the page
– junior
Nov 25 '18 at 2:59
add a comment |
In these cases you can use Template literals, you can achieve results I think a little easier to read. Please consider the following example.
Edit: In order to use $.getJSON in the implementation, I edited the answer, I am getting data from https://jsonplaceholder.typicode.com/ for simplicity. The logic is almost the same. The difference here is to execute the render logic inside a $.getJSON callback.
function render() {
$.getJSON('https://jsonplaceholder.typicode.com/posts', function(data) {
const output = document.querySelector('#output');
const rows = data.map(toTableRows).join('');
output.innerHTML = `<table>
<tbody>${rows}</tbody>
</table>`;
});
}
function toTableRows(data) {
return `
<tr>
<td>${data.title}</td>
<td>${data.body}</td>
</tr>`;
}
render();<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="output"></div>
</body>
</html>answered Nov 22 '18 at 3:45
user615274user615274
1,52211222
very Good example, but I need to use the .getjson to download a file, then populate the data stored in it, my outcome should be in table row format
– junior
Nov 25 '18 at 2:24
I just edited the answer.
– user615274
Nov 25 '18 at 17:26
add a comment |
In these cases you can use Template literals, you can achieve results I think a little easier to read. Please consider the following example.
Edit: In order to use $.getJSON in the implementation, I edited the answer, I am getting data from https://jsonplaceholder.typicode.com/ for simplicity. The logic is almost the same. The difference here is to execute the render logic inside a $.getJSON callback.
function render() {
$.getJSON('https://jsonplaceholder.typicode.com/posts', function(data) {
const output = document.querySelector('#output');
const rows = data.map(toTableRows).join('');
output.innerHTML = `<table>
<tbody>${rows}</tbody>
</table>`;
});
}
function toTableRows(data) {
return `
<tr>
<td>${data.title}</td>
<td>${data.body}</td>
</tr>`;
}
render();<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="output"></div>
</body>
</html>answered Nov 22 '18 at 3:45
user615274user615274
1,52211222
very Good example, but I need to use the .getjson to download a file, then populate the data stored in it, my outcome should be in table row format
– junior
Nov 25 '18 at 2:24
I just edited the answer.
– user615274
Nov 25 '18 at 17:26
add a comment |
In these cases you can use Template literals, you can achieve results I think a little easier to read. Please consider the following example.
Edit: In order to use $.getJSON in the implementation, I edited the answer, I am getting data from https://jsonplaceholder.typicode.com/ for simplicity. The logic is almost the same. The difference here is to execute the render logic inside a $.getJSON callback.
function render() {
$.getJSON('https://jsonplaceholder.typicode.com/posts', function(data) {
const output = document.querySelector('#output');
const rows = data.map(toTableRows).join('');
output.innerHTML = `<table>
<tbody>${rows}</tbody>
</table>`;
});
}
function toTableRows(data) {
return `
<tr>
<td>${data.title}</td>
<td>${data.body}</td>
</tr>`;
}
render();<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="output"></div>
</body>
</html>answered Nov 22 '18 at 3:45
user615274user615274
1,52211222
In these cases you can use Template literals, you can achieve results I think a little easier to read. Please consider the following example.
Edit: In order to use $.getJSON in the implementation, I edited the answer, I am getting data from https://jsonplaceholder.typicode.com/ for simplicity. The logic is almost the same. The difference here is to execute the render logic inside a $.getJSON callback.
function render() {
$.getJSON('https://jsonplaceholder.typicode.com/posts', function(data) {
const output = document.querySelector('#output');
const rows = data.map(toTableRows).join('');
output.innerHTML = `<table>
<tbody>${rows}</tbody>
</table>`;
});
}
function toTableRows(data) {
return `
<tr>
<td>${data.title}</td>
<td>${data.body}</td>
</tr>`;
}
render();<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="output"></div>
</body>
</html>function render() {
$.getJSON('https://jsonplaceholder.typicode.com/posts', function(data) {
const output = document.querySelector('#output');
const rows = data.map(toTableRows).join('');
output.innerHTML = `<table>
<tbody>${rows}</tbody>
</table>`;
});
}
function toTableRows(data) {
return `
<tr>
<td>${data.title}</td>
<td>${data.body}</td>
</tr>`;
}
render();<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="output"></div>
</body>
</html>function render() {
$.getJSON('https://jsonplaceholder.typicode.com/posts', function(data) {
const output = document.querySelector('#output');
const rows = data.map(toTableRows).join('');
output.innerHTML = `<table>
<tbody>${rows}</tbody>
</table>`;
});
}
function toTableRows(data) {
return `
<tr>
<td>${data.title}</td>
<td>${data.body}</td>
</tr>`;
}
render();<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="output"></div>
</body>
</html>answered Nov 22 '18 at 3:45
user615274user615274
1,52211222
edited Nov 25 '18 at 17:25
answered Nov 22 '18 at 3:45
user615274user615274
1,52211222
answered Nov 22 '18 at 3:45
user615274user615274
1,52211222
answered Nov 22 '18 at 3:45
user615274user615274
1,52211222
1,52211222
very Good example, but I need to use the .getjson to download a file, then populate the data stored in it, my outcome should be in table row format
– junior
Nov 25 '18 at 2:24
I just edited the answer.
– user615274
Nov 25 '18 at 17:26
add a comment |
very Good example, but I need to use the .getjson to download a file, then populate the data stored in it, my outcome should be in table row format
– junior
Nov 25 '18 at 2:24
I just edited the answer.
– user615274
Nov 25 '18 at 17:26
very Good example, but I need to use the .getjson to download a file, then populate the data stored in it, my outcome should be in table row format
– junior
Nov 25 '18 at 2:24
very Good example, but I need to use the .getjson to download a file, then populate the data stored in it, my outcome should be in table row format
– junior
Nov 25 '18 at 2:24
I just edited the answer.
– user615274
Nov 25 '18 at 17:26
I just edited the answer.
– user615274
Nov 25 '18 at 17:26
add a comment |
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.
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%2f53423411%2fhow-can-i-iterate-through-my-object-and-display-table-rows-in-format%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 need to think of the DOM as a tree, not as a sequence of HTML elements.
– Robby Cornelissen
Nov 22 '18 at 3:23