Javascript 选择JSON对象数据表元素以列出其所有元素

我正在做一些有点过头的事情，我似乎找不到任何与此相关的库。在我正在开发的web应用程序中，我有一个n人的列表，单击一个人的名字，将生成一个由该人撰写的n篇文章的列表。我正在尝试使用JavaScript和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示例中很好地列出HTML表中的n个人数：

<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>

对于（var i=0；i我认为您走在了正确的轨道上。这样做可能会有所帮助：

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

以下是我的做法

我假设以下HTML：

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

然后，当您单击具有
名称
类名的元素时，从数据属性中提取id，使用id循环该客户机的AFD，并将它们附加到div（或您选择的元素）中。这进一步假设，在列出客户和开始单击他们的姓名之间，您没有对people对象进行排序，否则索引（ID）将完全不正常

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

$（'.name'）。单击（函数（）{
var id=$（this.data（'id'）；
people.clients[id].AFD.forEach（函数（el，i）{
$（'#articles'）。追加（''+el.articleName+''）；
});
});

你能做一个吗？我已经更新了你的小提琴。看一看：难以置信，非常感谢你。你可能可以通过在Javascript中创建DOM节点，并在那里添加事件处理程序，然后再将其输出到页面，从而使这段代码更加简洁。代码
var node=document.getElementById（'tabA'）；while（node.hasChildNodes）是什么（））{node.removeChild（node.lastChild）；}
完全按照您提供的JFIDLE进行操作？我试图理解它，因为我现在需要添加在从任何人中选择一个KCS文章后填充DOM的功能。while循环是删除id为tabA的表中的所有行。因此，当您选择一个特定名称时，代码将删除该表中的所有现有行然后，该表将为所选名称添加新行。另请看下面@Andy的解决方案，它更优雅。
function selectName (idx)
{
  selectedClient = idx;
}

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

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

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