So zeigen json Daten in html

Ich versuche, die JSON-Daten in HTML wie folgt zu machen:So zeigen json Daten in html

var data = [ 
 
    {"id":"856","name":"India"}, 
 
    {"id":"1035","name":"Chennai"}, 
 
    {"id":"1048","name":"Delhi"}, 
 
    {"id":"1113","name":"Lucknow"}, 
 
    {"id":"1114","name":"Bangalore"}, 
 
    {"id":"1115","name":"Ahmedabad"}, 
 
    {"id":"1116","name":"Cochin"}, 
 
    {"id":"1117","name":"London"}, 
 
    {"id":"1118","name":"New York"}, 
 
    {"id":"1119","name":"California"} 
 
]; 
 
function drawTable(data) { 
 
    for (var i = 0; i < data.length; i++) { 
 
     drawRow(data[i]); 
 
    } 
 
} 
 

 
function drawRow(rowData) { 
 
    var row = $("<tr />") 
 
    $("#myDataTable").append(row); 
 
    row.append($("<td>" + rowData.id + "</td>")); 
 
    row.append($("<td>" + rowData.name + "</td>")); 
 
}

<table id="myDataTable"> 
 
    <tr> 
 
     <th>Id</th> 
 
     <th>Name</th> 
 
    </tr> 
 
</table>

Aber es funktioniert nicht.

Quelle

2016-05-19 pradeepks

Ihr Code scheint zu funktionieren .. haben Sie genannt 'drawTable()' irgendwo? Was ist passiert? –

Sie vergessen, Ihre Funktion 'drawTable' aufzurufen. Mit 'drawTable (data);' – antyrat

Sie rufen nicht Ihre Funktion drawTable(). Sie können auch $.each() Schleife data Array verwenden

var data = [{ 
 
    "id": "856", 
 
    "name": "India" 
 
}, { 
 
    "id": "1035", 
 
    "name": "Chennai" 
 
}, { 
 
    "id": "1048", 
 
    "name": "Delhi" 
 
}, { 
 
    "id": "1113", 
 
    "name": "Lucknow" 
 
}, { 
 
    "id": "1114", 
 
    "name": "Bangalore" 
 
}, { 
 
    "id": "1115", 
 
    "name": "Ahmedabad" 
 
}, { 
 
    "id": "1116", 
 
    "name": "Cochin" 
 
}, { 
 
    "id": "1117", 
 
    "name": "London" 
 
}, { 
 
    "id": "1118", 
 
    "name": "New York" 
 
}, { 
 
    "id": "1119", 
 
    "name": "California" 
 
}]; 
 
drawTable(); 
 

 
function drawTable() { 
 
    var table = $("#myDataTable"); 
 

 
    $.each(data, function(index, rowData) { 
 
    table.append(
 
     "<tr>" 
 
     +"<td>"+rowData.id+"</td>" 
 
     +"<td>"+rowData.name+"</td>" 
 
     +"</tr>" 
 
    ); 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="myDataTable"> 
 
    <tr> 
 
    <th>Id</th> 
 
    <th>Name</th> 
 
    </tr> 
 
</table>

Quelle

2016-05-19 14:19:39 Justinas

Ihre Antwort macht keinen Sinn. OP-Code funktioniert gut, er vergisst einfach, 'drawTable' aufzurufen. Wählen Sie besser, um solche Fragen zu schließen, da sie für die SO-Community keine Vorteile bieten. – antyrat

@antyrat Ich habe auch kürzere Version für OP-Funktionen zur Verfügung gestellt. Ist das eine falsche Sache? – Justinas

Ich versuche nur zu sagen, dass diese Frage für die Gemeinschaft nutzlos ist und stattdessen geschlossen werden sollte. Ich beurteile dich nicht dafür, OP zu helfen, besser Code zu optimieren;) – antyrat

var data = [{ 
 
    "id": "856", 
 
    "name": "India" 
 
}, { 
 
    "id": "1035", 
 
    "name": "Chennai" 
 
}, { 
 
    "id": "1048", 
 
    "name": "Delhi" 
 
}, { 
 
    "id": "1113", 
 
    "name": "Lucknow" 
 
}, { 
 
    "id": "1114", 
 
    "name": "Bangalore" 
 
}, { 
 
    "id": "1115", 
 
    "name": "Ahmedabad" 
 
}, { 
 
    "id": "1116", 
 
    "name": "Cochin" 
 
}, { 
 
    "id": "1117", 
 
    "name": "London" 
 
}, { 
 
    "id": "1118", 
 
    "name": "New York" 
 
}, { 
 
    "id": "1119", 
 
    "name": "California" 
 
}]; 
 

 
function drawRow(rowData) { 
 
    var table = document.getElementById('myDataTable'); 
 

 

 
    for (var i = 0; i < rowData.length; i++) { 
 
    var tr = document.createElement('tr'); 
 
    var td_1 = document.createElement('td'); 
 
    var td_2 = document.createElement('td'); 
 

 
    td_1.innerText = rowData[i].id; 
 
    td_2.innerText = rowData[i].name; 
 

 
    tr.appendChild(td_1); 
 
    tr.appendChild(td_2); 
 

 
    table.appendChild(tr); 
 
    } 
 
} 
 

 

 
drawRow(data);

<table id="myDataTable"> 
 
    <tr> 
 
    <th>Id</th> 
 
    <th>Name</th> 
 
    </tr> 
 

 
</table>

Quelle

2016-05-19 14:26:06 DININDU

So zeigen json Daten in html

Antwort

Verwandte Themen