Question

我正在做一些有点过头的事情，我似乎无法找到任何与此相关的库。在我正在处理的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 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文章将如下生成：AFD第1条由joe，...，AFD第4条由joe。

终于来了！我有一些问题可以帮助我度过难关。如何在点击某人的姓名后更改selectedClient的值？这可能是通过执行如下函数来完成的吗？

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

Answer 1

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

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

然后这将是你的selectName函数：

function selectName (idx)
{
  selectedClient = idx;
}

Answer 2

这是我接近它的方式。

我假设以下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类名称的元素时，从数据属性中选取id，使用id循环访问该客户端的AFD并将它们附加到div（或你的选择。）。这进一步假设你在列出你的客户端和你开始点击他们的名字之间你没有对人物对象进行排序，否则索引（ids）将完全没有了。

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

JSfiddle

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

2 个答案: