選擇JSON對象數據表元素來列出其所有元素

我正在處理一些稍微超過我的頭，我似乎無法找到任何與此相關的庫。在我正在編寫的Web應用程序中，我有一個n個人的列表，當點擊一個人的姓名時，會生成一個由該人編寫的n篇文章列表。我正在嘗試使用JavaScript和JSON來完成此操作。選擇JSON對象數據表元素來列出其所有元素

這是我的JSON數據將如何組織：

var people = { 
    'clients': [ 
     { 
      'fname': 'joe', 
      'lname': 'smith', 
      'AFD': [ 
       { 
        'articleName': 'AFDArticle1byjoe' 
       }, 
       { 
        'articleName': 'AFDArticle2byjoe' 
       }, 
       { 
        'articleName': 'AFDArticle3byjoe' 
       }, 
       { 
        'articleName': 'AFDArticle4byjoe' 
       }, 
       { 
        'articleName': 'AFDArticle5byjoe' 
       } 
      ] 
     }, 
     { 
      'fname': 'jim', 
      'lname': 'Hoff', 
      'AFD': [ 
       { 
        'articleName': 'AFDArticle12byjim' 
       } 
      ] 
     }, 
     { 
      'fname': 'rick', 
      'lname': 'Robinson', 
      'AFD': [ 
       { 
        'articleName': 'AFDArticle5byrick' 
       } 
      ] 
     }, 
     { 
      'fname': 'sarah', 
      'lname': 'Ross', 
      'AFD': [ 
       { 
        'articleName': 'AFDArticle20bysarah' 
       } 
      ] 
     }, 
     { 
      'fname': 'jack', 
      'lname': 'jones', 
      'AFD': [ 
       { 
        'articleName': 'AFDArticle9byjack' 
       } 
      ] 
     } 
    ] 
};

每個人都有一個名字，姓氏，和n AFD文章的列表。

此代碼將很好地從JSON例如上面列出了N多人的數量在一個HTML表：

<table border="1"> 
<script> 
for (var i=0;i<people.clients.length;i++) 
{ 

    $("#tabX").append("<tr><td>"+people.clients[i].fname+"</td></tr>"); 

} 
</script> 
</table>

，所以我會得到第一個名字的一些不錯的輸出在表像這樣：「joe jim rick sarah jack」

所以通過點擊「joe」，會生成Joe文章的數據表。我已經能夠做到這一點，像這樣：

<table border="1"> 
<script> 
    for (var i=0;i<people.clients.length;i++) 
    { 
     $("#tabX").append("<tr><td>"+people.clients[ selectedClient ].AFD[i].articleName+"</td></tr>"); 
    } 
</script> 
</table>

其中「selectedClient」是當前已將其選擇客戶端，AFD文章將像這樣產生：由Joe AFD第1，...，AFD第四條喬。

所以最後！我有一些問題可以幫助我解決這個問題。如何在點擊某人的姓名後更改selectedClient的值？這可能是通過執行像下面這樣的函數來完成的嗎？

$("#tabX").append("<tr><td><a href="javascript:selectName();">" +people.clients[i].fname+ "</a></td></tr>");

來源

2013-09-26 user2636774

你可以做一個[小提琴]（http://jsfiddle.net）？ –

是的，差不多完成了 – user2636774

http://jsfiddle.net/bJ3eM/ – user2636774

我認爲你是在正確的軌道上。也許是這樣，這將幫助：

$("#tabX").append("<tr><td><a href=\"javascript:;\" onclick=\"javascript:selectName("+i+");\">" +people.clients[i].fname+ "</a></td></tr>");

，然後這將是你selectName功能：

function selectName (idx) 
{ 
    selectedClient = idx; 
}

來源

2013-09-26 19:45:10 AC1

您可以通過在Javascript中創建DOM節點，並在將事件處理程序輸出到頁。 – Nightfirecat

代碼是什麼'var node = document.getElementById（'tabA'）; while（node.hasChildNodes（））{ node.removeChild（node.lastChild）; 「你完全在你提供的jfiddle中做什麼？我試圖理解它，因爲現在我需要添加從任何人員中選擇一個KCS文章後填充DOM的功能。 – user2636774

while循環將刪除ID爲tabA的表的所有行。因此，當您選擇特定名稱時，代碼將刪除該表的所有現有行，然後爲所選名稱添加新行。下面看看@Andy的解決方案，它更優雅。 – AC1

這是我會怎麼處理它。

我想下面的HTML：

<table id="people"></table> 
<div id="articles"></div>

而下面的JavaScript。 forEach是IE9及以上版本。

因此，對於客戶列表中的每個人，將它們添加到表中，確保您將data id設置爲JS對象中該客戶端的索引，幷包含類名稱。

people.clients.forEach(function(el, i) { 
    $('#people').append('<tr><td data-id="' + i + '" class="name">' + el.fname + '</td></td>'); 
});

然後，當你在元素上點擊一個name類名，從數據屬性使用id拿起ID，遍歷AFD中的客戶端，並將它們添加到div（或元素你的選擇。）。這使得進一步的假設是，在你列出你的客戶的時間和你開始點擊他們的名字的時候，你並沒有對人員對象進行排序，否則索引（id）將全是怪事。

$('.name').click(function() { 
    var id = $(this).data('id'); 
    people.clients[id].AFD.forEach(function(el, i){ 
    $('#articles').append('<div>' + el.articleName + '</div>'); 
    }); 
});

JSfiddle

來源

2013-09-26 19:57:03 Andy

選擇JSON對象數據表元素來列出其所有元素

回答

相關問題