从JSON到关联数组转换成HTML表格

我想一个JSON对象转换为关联数组，但它看起来像我无法作出正确的：从JSON到关联数组转换成HTML表格

$(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/MV5BMDdmZGU3NDQt[email protected]._V1_SX300.jpg"},{"Title":"Titanic II","Year":"2010","imdbID":"tt1640571","Type":"movie","Poster":"https://images-na.ssl-images-amazon.com/images/M/[email protected]@._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/[email protected]@._V1_SX300.jpg"},{"Title":"Titanic","Year":"1953","imdbID":"tt0046435","Type":"movie","Poster":"https://images-na.ssl-images-amazon.com/images/M/[email protected]_V1_SX300.jpg"},{"Title":"Titanic","Year":"1996","imdbID":"tt0115392","Type":"series","Poster":"https://images-na.ssl-images-amazon.com/images/M/[email protected]@._V1_SX300.jpg"},{"Title":"Raise the Titanic","Year":"1980","imdbID":"tt0081400","Type":"movie","Poster":"https://images-na.ssl-images-amazon.com/images/M/MV5BM2MyZWYzOTQt[email protected]._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/[email protected]_V1_SX300.jpg"},{"Title":"Titanic","Year":"2012","imdbID":"tt1869152","Type":"series","Poster":"https://images-na.ssl-images-amazon.com/images/M/[email protected]@._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"}

我的不是那么清楚对不起，我希望有人能尽快帮助我。

来源

2017-04-20 Alice

对象'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); 

      }); 
    }); 
});

来源

2017-04-20 17:32:14

如果您想要，可以使用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);

来源

2017-04-20 17:04:00

看一看在回答之前的用户代码... $ .getJSON通过一个js OBJ ... –

您可能希望这样：

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

起初拿钥匙了第一个数组元素，并用它作为表标题行。然后遍历数组并插入值...

来源

2017-04-20 17:19:42

*也请看看：* https://developer.mozilla.org/de/文档/网络/的JavaScript /参考/ Global_Objects /对象/值＃Browser_compatibility –

从JSON到关联数组转换成HTML表格

回答

相关问题