From JSON to Associative array into html table

Question

I want to convert a JSON object to associative array but it looks like I was not able to make it right:

$(document).ready(function () {
$('#button').click(function () {
    $.getJSON("http://www.omdbapi.com/?s=apple", function (json) {
        console.log(json);

var body = document.body,
        tbl  = document.createElement('table');
        tbl.style.width  = '100px';
        tbl.style.border = '1px solid black';

        for(var i = 0; i < 4; i++){
            var tr = tbl.insertRow();
            for(var j = 0; j < 4; j++){
                var td = tr.insertCell();
                td.appendChild(document.createTextNode("mela"));
                td.style.border = '1px solid black';
            }
        }
        body.appendChild(tbl);

    });
});
});

I also want to put that data onto a table, so instead of "apple" I don't know what to put. (I know that the number of cells and columns will not be 4 and 4, that's an example) The json request will be something like this:

{"Search":[{"Title":"Titanic","Year":"1997","imdbID":"tt0120338","Type":"movie","Poster":"https://images-na.ssl-images-amazon.com/images/M/MV5BMDdmZGU3NDQtY2E5My00ZTliLWIzOTUtMTY4ZGI1YjdiNjk3XkEyXkFqcGdeQXVyNTA4NzY1MzY@._V1_SX300.jpg"},{"Title":"Titanic II","Year":"2010","imdbID":"tt1640571","Type":"movie","Poster":"https://images-na.ssl-images-amazon.com/images/M/MV5BMTMxMjQ1MjA5Ml5BMl5BanBnXkFtZTcwNjIzNjg1Mw@@._V1_SX300.jpg"},{"Title":"Titanic: The Legend Goes On...","Year":"2000","imdbID":"tt0330994","Type":"movie","Poster":"https://images-na.ssl-images-amazon.com/images/M/MV5BMTg5MjcxODAwMV5BMl5BanBnXkFtZTcwMTk4OTMwMg@@._V1_SX300.jpg"},{"Title":"Titanic","Year":"1953","imdbID":"tt0046435","Type":"movie","Poster":"https://images-na.ssl-images-amazon.com/images/M/MV5BMTU3NTUyMTc3Nl5BMl5BanBnXkFtZTgwOTA2MDE3MTE@._V1_SX300.jpg"},{"Title":"Titanic","Year":"1996","imdbID":"tt0115392","Type":"series","Poster":"https://images-na.ssl-images-amazon.com/images/M/MV5BMTIyNjc0NjgyMl5BMl5BanBnXkFtZTcwMDAzMTAzMQ@@._V1_SX300.jpg"},{"Title":"Raise the Titanic","Year":"1980","imdbID":"tt0081400","Type":"movie","Poster":"https://images-na.ssl-images-amazon.com/images/M/MV5BM2MyZWYzOTQtMTYzNC00OWIyLWE2NWItMzMwODA0OGQ2ZTRkXkEyXkFqcGdeQXVyMjI4MjA5MzA@._V1_SX300.jpg"},{"Title":"The Legend of the Titanic","Year":"1999","imdbID":"tt1623780","Type":"movie","Poster":"https://images-na.ssl-images-amazon.com/images/M/MV5BMjMxNDU5MTk1MV5BMl5BanBnXkFtZTgwMDk5NDUyMTE@._V1_SX300.jpg"},{"Title":"Titanic","Year":"2012","imdbID":"tt1869152","Type":"series","Poster":"https://images-na.ssl-images-amazon.com/images/M/MV5BMTcxNzYxOTAwMF5BMl5BanBnXkFtZTcwNzU3Mjc2Nw@@._V1_SX300.jpg"},{"Title":"Titanic: Blood and Steel","Year":"2012–","imdbID":"tt1695366","Type":"series","Poster":"N/A"},{"Title":"In Search of the Titanic","Year":"2004","imdbID":"tt1719665","Type":"movie","Poster":"https://images-na.ssl-images-amazon.com/images/M/MV5BMTAzNjY0NDA2NzdeQTJeQWpwZ15BbWU4MDIwMzc1MzEx._V1_SX300.jpg"}],"totalResults":"187","Response":"True"}

I'm sorry for not being so clear, I hope someone will help me soon.

Jonas Wilms · Accepted Answer · 2017-04-20 17:19:42Z

1

You may want this:

tbl.innerHTML="<tr>"+Object.keys(json.Search[0]).map(v=>"<th>"+v+"</th>").join("")+"</tr>";
json.Search.forEach(data=>{
  tbl.innerHTML+="<tr>"+Object.values(data).map(v=>"<td>"+v+"</td>").join("")+"</tr>";
});

At first take the keys out of the first array element and use it as the tables headline row. Then iterate over the array and insert the values...

answered Apr 20, 2017 at 17:19

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jonas Wilms Over a year ago

Please also have a look at: developer.mozilla.org/de/docs/Web/JavaScript/Reference/…

marc_s · Accepted Answer · 2017-04-21 13:47:32Z

The object 'json' already has an array, on the property 'Search', what you need do is use like that, 'json.Search'.

In order to put the information inside your table you need play with index in your array, take a look on my example below.

$(document).ready(function () {
  $('#button').click(function () {
    $.getJSON("http://www.omdbapi.com/?s=apple", function (json) {
        //json.Search is your array

      var body = document.body,
              tbl  = document.createElement('table');
              tbl.style.width  = '100px';
              tbl.style.border = '1px solid black';

              for(var i = 0; i < json.Search.length; i++){
                  var tr = tbl.insertRow();
                  //for(var j = 0; j < 4; j++){
                      var td = tr.insertCell();
                      // here you can play with index, in order to put the correct info inside the table, in this example I only use a table with one column
                      td.appendChild(document.createTextNode(json.Search[i].Title));
                      td.style.border = '1px solid black';
                  //}
              }
              body.appendChild(tbl);

          });
   });
});

score 0 · Accepted Answer · 2017-04-20 17:09:04Z

0

If you want you can change JSON into js object by using JSON.parse method. Look at this code : You can test it also here https://jsfiddle.net/bp3znjdp/

var text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';

var obj = JSON.parse(text);
alert(obj);
alert(obj.employees[0].firstName);
alert(obj['employees'][0].firstName);

edited Apr 20, 2017 at 17:09

answered Apr 20, 2017 at 17:04

user6848348

Collectives™ on Stack Overflow

From JSON to Associative array into html table

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related