從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表格

回答

相關問題