从 JSON 到关联数组到 html 表

Question

我想将 JSON 对象转换为关联数组，但看起来我无法正确处理：

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

    });
});
});

我还想把这些数据放到一个表上，所以我不知道该放什么而不是“苹果”。 （我知道单元格和列的数量不会是4和4，这是一个例子） json 请求将是这样的：

{"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"}

很抱歉没有这么清楚，希望有人能尽快帮助我。

Answer 1

对象'json'已经有一个数组，在属性'Search'上，你需要做的就是像这样使用'json.Search'。

为了将信息放入您需要在数组中使用索引的表格中，请查看下面的示例。

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

          });
   });
});

Answer 2

你可能想要这个：

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

首先从第一个数组元素中取出键并将其用作表格标题行。然后遍历数组并插入值...

Answer 3

如果您愿意，可以使用 JSON.parse 方法将 JSON 更改为 js 对象。 看看这段代码： 你也可以在这里测试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);