从JSON到关联数组到html表

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.

Answer 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...

Answer 2

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

Answer 3

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

          });
   });
});