选择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对象数据表元素来列出其所有元素

回答

相关问题