How do I display the details in a JSON array in a html?

Question

I am trying to display the contents in a Json array from an api into my html. How do I do it?

This is my Json array.

{
  page: 2,
  per_page: 3,
  total: 12,
  total_pages: 4,
  data: [
    {
      id: 4,
      first_name: "Eve",
      last_name: "Holt",
      avatar:
        "https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg"
    },
    {
      id: 5,
      first_name: "Charles",
      last_name: "Morris",
      avatar:
        "https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg"
    },
    {
      id: 6,
      first_name: "Tracey",
      last_name: "Ramos",
      avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg"
    }
  ]
};

I have JQuery Ajax request to get the data from API:"https://reqres.in/api/users?page=2"

Where in `html` you wanna display and how you want to display. I mean in `table` or something like that — Maheer Ali, Feb 03 '19 at 09:30
Possible duplicate of [How to display a json array in table format?](https://stackoverflow.com/questions/18395976/how-to-display-a-json-array-in-table-format) and [How to parse a Json list like this and display its elements in HTML?](https://stackoverflow.com/questions/18393860) and [Convert JSON array to an HTML table in jQuery](https://stackoverflow.com/questions/1051061/) and [Use JQuery to convert JSON array to HTML bulleted list](https://stackoverflow.com/questions/4189365) and [How to foreach JSON to HTML ul li](https://stackoverflow.com/questions/53995744) — adiga, Feb 03 '19 at 09:46
This has been asked hundreds of times. Please make an attempt and some research before asking others to do it for you. See: [How much research effort is expected of Stack Overflow users?](https://meta.stackoverflow.com/a/261593/3082296) — adiga, Feb 03 '19 at 09:47
If you have a new question, please post a new question instead of completely editing your question. — Bhargav Rao, Feb 04 '19 at 21:22

score 1 · Accepted Answer · answered Feb 03 '19 at 09:48

You need to iterate over the .data array. Something like this:

let apiCall = 'https://reqres.in/api/users?page=2';

jQuery.getJSON(apiCall).then(function (res) {
  let html = '';
  res.data.forEach(user => {
    html += `<tr>
        <td><img src="${user.avatar}"></td><td>${user.first_name} ${user.last_name}</td>
      </tr>`;
  });
  jQuery('#users').html(html);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="users">
</table>

score 0 · Answer 2 · answered Feb 03 '19 at 09:27

if you are using Jquery: (client side)

JSON.parse() Method:
var json_obj = '{"page":2,"per_page":3,"total":12,"total_pages":4,"data":[{"id":4,"first_name":"Eve","last_name":"Holt","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg"},{"id":5,"first_name":"Charles","last_name":"Morris","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg"},{"id":6,"first_name":"Tracey","last_name":"Ramos","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg"}]}';

var obj = JSON.parse(json_obj);

more example:

https://www.w3schools.com/js/js_json_parse.asp

How do I display the details in a JSON array in a html?

2 Answers2