Von JSON-Array in HTML-Tabelle assoziativen

Question

Ich mag ein JSON-Objekt zu assoziativem Array konvertieren, aber es sieht aus wie ich es nicht in der Lage war zu Recht zu machen:

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

    }); 
}); 
}); 

Ich mag auch, dass die Daten auf ein setzen Tisch, also statt "Apfel" weiß ich nicht, was ich setzen soll. (ich, dass die Anzahl der Zellen und Spalten weiß nicht 4 sein und 4, das ist ein Beispiel) Die json Anfrage in etwa so sein wird:

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

Es tut mir leid für die nicht so klar zu sein, ich hoffe jemand wird mir bald helfen.

Answer 1

Das Objekt 'json' hat bereits ein Array, auf der Eigenschaft 'Suchen', was Sie tun müssen, ist so zu verwenden, 'json.Search'.

Um die Informationen in Ihre Tabelle zu bringen, müssen Sie mit Index in Ihrem Array spielen, werfen Sie einen Blick auf mein Beispiel unten.

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

Wenn Sie möchten, können Sie JSON mithilfe der JSON.parse-Methode in js-Objekt ändern. Blick auf diesen Code: Sie es hier auch testen können 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

Sie können dies tun:

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

Zuerst die Schlüssel nehmen aus dem ersten Array-Element und es verwenden, wie die Tabellen Überschrift Zeile. Dann über das Array iterieren und die Werte einfügen ...