如何將JSON數據存儲爲JavaScript表格格式？

我正在開發一個web應用程序，並且我使用jQuery 1.5和JavaScript作爲應用程序的主要功能。我從我的應用程序連接到一個RESTful界面，在那裏我爲一個人獲取信息。我用這個功能來檢索JSON頁面中的信息：如何將JSON數據存儲爲JavaScript表格格式？

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，姓名和年齡並忽略其餘信息？

來源

2011-07-22 tasanoui

你是什麼意思「的JavaScript表」呢？ –

當你說「javascript table」時，你的意思是你想要將它存儲在一個普通的javascript數組中嗎？ –

@Jonathan M：對不起，我沒有說清楚，我的意思是一個數組。 – tasanoui

$.getJSON("example.json", function(data) { 
var name = data.person.name; 
var id = data.person.id; 
var age = data.person.age; 
}

什麼確切地通過一個JavaScript表 u能在一個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>");

來源

2011-07-22 19:26:31

@Prav Sharma：你的答案似乎很好，但首先，我需要將它們存儲在一個數組中（我編輯的問題更具體），其次，如果我提醒名稱，ID和年齡以查看返回的值，我爲他們三人得到「未定義」。 – tasanoui

您可以使用jQuery的map功能：

var data = $.map(originalData, function(person) { 
    return { id: person.id, name: person.name, age: person.age }; 
});

map每個項目基本上轉換在Array，產生新的Array與修改的對象。

來源

2011-07-22 19:21:30 Jacob

對不起，編輯你的答案亂七八糟。想改善別人的編輯，但後來我後悔，想要回滾。 – Shef

下面是具體的JavaScript/jQuery的需要，基於MAP功能。

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>

來源

2011-07-23 00:07:57 Zachary

如何將JSON數據存儲爲JavaScript表格格式？

回答

相關問題