如何將 JSON 數據存儲為 JavaScript 表格格式？
[英]How to store JSON data into JavaScript table format?
問題描述
我正在開發一個 web 應用程序，我使用 jQuery 1.5 和 JavaScript 作為應用程序的主要功能。 我從我的應用程序連接到一個 RESTful 界面，我可以在其中獲取某個人的信息。 我使用這個 function 從 json 頁面檢索信息：
var jqxhr = $.getJSON("example.json", function() { // store the data in a table }
我的 json 格式的數據是這樣的，但結果我會得到不止一個人的格式：
[{"person":{"time":"2010-02-18T17:59:44","id":1,"name": "John","age":60, "updated_at":"010-02-18T17:59:44"}}]
如何在 JavaScript 表（更准確地說是數組）中僅存儲人員的 id、姓名和年齡，而忽略信息的 rest？
3 個解決方案
解決方案1
3 2011-07-23 00:07:57
這是您需要的具體 JavaScript / jQuery，基於 MAP ZC1C425268E18385D1AB4Z5074。
var originalData = [
{ "person": { "time": "2010-02-18T17:59:34", "id": 1, "name": "John", "age": 60, "updated_at": "010-02-18T17:59:41"} },
{ "person": { "time": "2010-02-18T17:59:44", "id": 2, "name": "Bob", "age": 50, "updated_at": "010-02-18T17:59:42"} },
{ "person": { "time": "2010-02-18T17:59:54", "id": 3, "name": "Sam", "age": 40, "updated_at": "010-02-18T17:59:43"} }
];
var data = $.map(originalData, function (ele) {
return { id: ele.person.id, name: ele.person.name, age: ele.person.age };
});
這是一個完整的示例，它將轉換並顯示 HTML 中的結果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.6.1.js" type="text/javascript"></script>
<script type="text/javascript">
function CreateTableView(objArray, theme, enableHeader) {
// set optional theme parameter
if (theme === undefined) {
theme = 'mediumTable'; //default theme
}
if (enableHeader === undefined) {
enableHeader = true; //default enable headers
}
// If the returned data is an object do nothing, else try to parse
var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
var str = '<table class="' + theme + '">';
// table head
if (enableHeader) {
str += '<thead><tr>';
for (var index in array[0]) {
str += '<th scope="col">' + index + '</th>';
}
str += '</tr></thead>';
}
// table body
str += '<tbody>';
for (var i = 0; i < array.length; i++) {
str += (i % 2 == 0) ? '<tr class="alt">' : '<tr>';
for (var index in array[i]) {
str += '<td>' + array[i][index] + '</td>';
}
str += '</tr>';
}
str += '</tbody>'
str += '</table>';
return str;
}
$(document).ready(function () {
var originalData = [
{ "person": { "time": "2010-02-18T17:59:34", "id": 1, "name": "John", "age": 60, "updated_at": "010-02-18T17:59:41"} },
{ "person": { "time": "2010-02-18T17:59:44", "id": 2, "name": "Bob", "age": 50, "updated_at": "010-02-18T17:59:42"} },
{ "person": { "time": "2010-02-18T17:59:54", "id": 3, "name": "Sam", "age": 40, "updated_at": "010-02-18T17:59:43"} }
];
var data = $.map(originalData, function (ele) {
return { id: ele.person.id, name: ele.person.name, age: ele.person.age };
});
$('#results').append(CreateTableView(data, 'lightPro', true));
});
</script>
</head>
<body>
<div id="results" style="width: 500px; margin: 20px auto;">
</div>
解決方案2
2 2011-07-22 19:21:30
您可以使用 jQuery 的map function：
var data = $.map(originalData, function(person) {
return { id: person.id, name: person.name, age: person.age };
});
map基本上轉換Array中的每個項目，生成帶有修改后對象的新Array 。
解決方案3
1 已采納 2011-07-22 19:26:31
$.getJSON("example.json", function(data) {
var name = data.person.name;
var id = data.person.id;
var age = data.person.age;
}
javascript 表到底是什么意思你可以存儲在 html 表中
var $table = $("<table>
<tr><td>name</td><td>"+name+"</td></tr>
<tr><td>id</td><td>"+id+"</td></tr>
<tr><td>age</td><td>"+age+"</td></tr>
</table>");
如何以這種json格式存儲數據？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.