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

Selecting JSON object data table element to list all its elements

本文关键字：元素 JSON 对象 数据表 选择      更新时间：2023-09-26

我正在做一些有点超出我头脑的东西，我似乎找不到任何与此相关的库。在我正在处理的 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>

所以我会在表格中获得一些名字的漂亮输出，如下所示："乔·吉姆·里克·莎拉·杰克">

因此，通过单击"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文章将生成如下：AFD文章1由joe，...，AFD文章4由joe。

所以终于！我有一些问题可以真正帮助我度过难关。单击某人的名字后，如何更改选定客户端的值？这可以通过执行如下函数来完成吗？

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

我认为你走在正确的轨道上。可能这样的事情会有所帮助：

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

然后这将是您的选择名称函数：

function selectName (idx)
{
  selectedClient = idx;
}

以下是我的做法。

我假设以下 HTML：

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

以及下面的Javascript。 forEach是IE9及更高版本。

因此，对于客户端列表中的每个人，将他们添加到表中，确保在 JS 对象中将data id 设置为该客户端的索引，并包含一个类名。

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

然后，当您单击具有name类名的元素时，从 data 属性中选取 id，使用 id 遍历该客户端的 AFD，并将它们附加到div(或您选择的元素(。这进一步假设，在你列出你的客户和你开始点击他们的名字之间，你没有对 people 对象进行排序，否则索引 (ids( 将全部不正常。

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

JSfiddle

相关文章：