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);

    });

});

edited Nov 22 '18 at 3:46

dhilt

8,31242343

asked Nov 22 '18 at 3:21

junior

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);

    });

});

edited Nov 22 '18 at 3:46

dhilt

8,31242343

asked Nov 22 '18 at 3:21

junior

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);

    });

});

edited Nov 22 '18 at 3:46

dhilt

8,31242343

asked Nov 22 '18 at 3:21

junior

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

edited Nov 22 '18 at 3:46

dhilt

8,31242343

asked Nov 22 '18 at 3:21

junior

205

edited Nov 22 '18 at 3:46

dhilt

8,31242343

asked Nov 22 '18 at 3:21

junior

205

edited Nov 22 '18 at 3:46

dhilt

8,31242343

edited Nov 22 '18 at 3:46

dhilt

8,31242343

edited Nov 22 '18 at 3:46

dhilt

8,31242343

asked Nov 22 '18 at 3:21

junior

205

asked Nov 22 '18 at 3:21

junior

205

asked Nov 22 '18 at 3:21

junior

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

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

Mukund

31117

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>

edited Nov 25 '18 at 17:25

answered Nov 22 '18 at 3:45

user615274

1,62011423

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 |

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');
});

Post as a guest

Name

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

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

<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

Mukund

31117

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 |

<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

Mukund

31117

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 |

<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

Mukund

31117

<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

Mukund

31117

answered Nov 22 '18 at 5:30

Mukund

31117

answered Nov 22 '18 at 5:30

Mukund

31117

answered Nov 22 '18 at 5:30

Mukund

31117

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

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.

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>

edited Nov 25 '18 at 17:25

answered Nov 22 '18 at 3:45

user615274

1,62011423

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.

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>

edited Nov 25 '18 at 17:25

answered Nov 22 '18 at 3:45

user615274

1,62011423

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.

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>

edited Nov 25 '18 at 17:25

answered Nov 22 '18 at 3:45

user615274

1,62011423

In these cases you can use Template literals, you can achieve results I think a little easier to read. Please consider the following example.

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>

edited Nov 25 '18 at 17:25

answered Nov 22 '18 at 3:45

user615274

1,62011423

edited Nov 25 '18 at 17:25

answered Nov 22 '18 at 3:45

user615274

1,62011423

answered Nov 22 '18 at 3:45

user615274

1,62011423

answered Nov 22 '18 at 3:45

user615274

1,62011423

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

I just edited the answer.

– user615274
Nov 25 '18 at 17:26

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');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Cfrgtkky