如何將JSON數據放入html頁面

我正在讀取我的員工表的名字，姓氏，emailId，我需要將這些數據插入我的HTML頁面。

如何做到這一點，請幫助我在這裏被擊中。

[ 
    { 

     "firstName": "Ramu", 
     "lastName": "Poola", 
     "emailId": "[email protected]" 
    }, 
    { 

     "firstName": "Dash", 
     "lastName": "Board", 
     "emailId": "[email protected]" 
    }, 
    { 

     "firstName": "Srinivas", 
     "lastName": "Grandhi", 
     "emailId": "[email protected]" 
    } 
]

來源

2014-11-21 Lokesh Reddy

您可能想要[在HTML表格中顯示JSON數據]（http://stackoverflow.com/questions/19901843/display-json-data-in- html-table） – 2014-11-21 06:39:45

你想要這個http://stackoverflow.com/questions/14100323/example-to-write-json-data-by-jquery-with-html-text – Exhausted 2014-11-21 06:40:04

告訴我們你試過什麼 – user3811714 2014-11-21 06:41:16

我想更好地使用JavaScript或jQuery的在這裏..

檢查下面的代碼...

var text = '{"employees":[' + 

'{"firstName":"John","lastName":"Doe" },' + 

'{"firstName":"Anna","lastName":"Smith" },' + 

'{"firstName":"Peter","lastName":"Jones" }]}'; 

obj = JSON.parse(text); 

document.getElementById("demo").innerHTML = obj.employees[1].firstName + " " + obj.employees[1].lastName; 

</script>

來源

2014-11-21 06:40:33

而不是發佈一個到[w3schools]（http://www.w3fools.com/）的鏈接，爲什麼不嘗試在OP的JSON中使用該代碼併發布正確答案？ – Vucko 2014-11-21 06:41:50

-1

你只需要設置螞蟻DIV一個ID或類名aftre把這個內容的那個div

var logData = JSON.parse(data); 
var $grouplist = $('#surat'); 
    $.each(logData, function() { 

           var dthtml=""; 


            dthtml += "<table><tr><td align='center'>"+this.firstname+"<br/></td><td><table><tr><td><img src='img/login.png'>"+this.lastname+"</td></tr><tr><td>"+this.emailId+"</td></tr></table></td></tr></table>"; 





            $(dthtml).appendTo($grouplist); 

           }); 


<div id='surat'></div>

來源

2014-11-21 06:49:15

有很多方法可以做到這一點，大多數方式可能使用JavaScript。你想在表格中顯示結果嗎？

如果是這樣你可以使用jQuery的數據表： http://www.datatables.net/examples/data_sources/js_array.html

這也將讓給你很多的表格功能，如排序和搜索沒有你不必自己編寫的代碼。

var dataSet = [ { 

    "firstName": "Ramu", 
    "lastName": "Poola", 
    "emailId": "[email protected]" 
}, 
{ 

    "firstName": "Dash", 
    "lastName": "Board", 
    "emailId": "[email protected]" 
}, 
{ 

    "firstName": "Srinivas", 
    "lastName": "Grandhi", 
    "emailId": "[email protected]" 
} 
] 

$('#example').dataTable({ 
     "data": dataSet, 
     "columns": [ 
      { "title": "firstName" }, 
      { "title": "lastName" }, 
      { "title": "emailId" }    
     ] 
    });

或者，你可以去像AngularJS這樣的框架，並使用ng-repeat來渲染你的表。雖然這是一個完整的框架，但它可以很好地與休息apis

來源

2014-11-21 07:42:19 user3589536

如何將JSON數據放入html頁面

回答

相關問題