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

    });
});
});

我还想将这些数据放到桌子上，而不是＆＃34; apple＆＃34;我不知道该放什么。（我知道单元格和列数不会是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

你可能想要这个：

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 2

如果需要，可以使用JSON.parse方法将JSON更改为js对象。看看这段代码：您也可以在https://jsfiddle.net/bp3znjdp/

进行测试

anaconda-navigator

Answer 3

对象'json'已经有一个数组，在'搜索'属性上，你需要做的就是使用'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);

          });
   });
});

从JSON到Associative数组到html表

3 个答案: