Jquery/JavaScript-检索数组变量

这是一个有点冗长的问题，所以我直接切入正题。我已经建立了一个包含一些内容的变量数组，其内容的子数组如下所示：（只是为了了解一些情况而编写的小片段）

在这个数组中，我打算在一些表div中建立一个模拟论坛系统。核心功能起作用，因为用户可以与初始表格屏幕设置交互，显示一个表格行，说明足球主题，但在点击事件中，我只看到未定义的表格内容，因为我不确定如何检索我试图访问的适当数据。我面临的主要困惑和复杂性是，能否检索这些变量（即replyId、内容和作者），并根据先前论坛属性的设置在其中显示它们——这意味着如果用户选择了“足球主题”，他们只会被介绍适当的足球相关话题等

感谢您的帮助

    //onClick function
        function topicOnClick (node, topic){
            'use strict';
            node.on("click", function() {
                showSingleTopic(topic);
            });
    }

//function for showing initial forum page
    function showForum () {

        'use strict';


        $(".homePage").hide();
        $("#registerPage").hide();
        $("#aboutPage").hide();
        $("#loginPage").hide();
        $("#browsePage").show();


        var page = $("#browsePage");

        var topicTable = $("<table class='forumTable'><tr><th>Title</th><th>Posts</th><th>Followers</th></tr></table>");

        //console test
        //console.log(topics);


        //Looping all topics in variable "topics"
        for (index in topics) {
            //console test
            console.log(topics[index].title);
            var row = $("<tr></tr>");
            row.append("<td>" + topics[index].title + "</td>");
            row.append("<td>" + topics[index].articles + "</td>");
            row.append("<td>" + topics[index].followers + "</td>");

            topicOnClick(row, topics[index]);


            topicTable.append(row);

        }

        page.append(topicTable);

        //Finally, add the page to our web app
        $("#maincontent").html(page);

    }


//this function isn't working in the ways I want it to as I'm not sure how to retrieve my replyId, contents and author from within my array
    function showSingleTopic (topicDetails){
        'use strict';
        alert(topicDetails.title);

        $(".homePage").hide();
        $("#registerPage").hide();
        $("#aboutPage").hide();
        $("#loginPage").hide();
        $("#browsePage").hide();

        var page = $("#individualForumPage");
        //page.append("<h1>"topicDetails.title"</h1>")

        var individualTopicTable = $("<table class='forumTable'><tr><th>Contents</th><th>Author</th><th>Replies</th></tr></table>");

        //Looping all topics in variable "topics"
        for (index in topics) {
            //console test
            console.log(topics[index].postId);
            var row = $("<tr></tr>");
            row.append("<td>" + topics[index].contents + "</td>");
            row.append("<td>" + topics[index].author + "</td>");
            row.append("<td>" + topics[index].replies + "</td>");

            //topicOnClick(row, topics[index]);


            individualTopicTable.append(row);

        }

        page.append(individualTopicTable);

        //Finally, add the page to our web app
        $("#maincontent").html(page);

    }

//onClick函数
函数topicOnClick（节点，主题）{
"严格使用",；
node.on（“单击”，函数（）{
showSingleTopic（主题）；
});
}
//显示初始论坛页面的功能
功能展示论坛（）{
"严格使用",；
$（“.homePage”）.hide（）；
$（“#注册表页”）.hide（）；
$（“#aboutPage”）.hide（）；
$（“#登录页面”）.hide（）；
$（“#浏览页面”）.show（）；
var页面=$（“#浏览页面”）；
var topicTable=$（“标题标题栏”）；
//控制台测试
//console.log（主题）；
//循环变量“topics”中的所有主题
用于（主题中的索引）{
//控制台测试
console.log（主题[index].title）；
变量行=$（“”）；
行。追加（“+主题[索引].title+”）；
行。追加（“+主题[索引].articles+”）；
行。追加（“+主题[索引].followers+”）；
topicOnClick（行，主题[索引]）；
topicTable.append（行）；
}
第页。追加（主题可引用）；
//最后，将页面添加到我们的web应用程序中
$（“#主要内容”）.html（第页）；
}
//此函数无法按我希望的方式工作，因为我不确定如何从数组中检索replyId、内容和作者
函数showSingleTopic（主题详细信息）{
"严格使用",；
警报（topicDetails.title）；
$（“.homePage”）.hide（）；
$（“#注册表页”）.hide（）；
$（“#aboutPage”）.hide（）；
$（“#登录页面”）.hide（）；
$（“#browsePage”）.hide（）；
var页面=$（“#个人消费”）；
//page.append（““topicDetails.title”）
var individualTopicTable=$（“内容”）；
//循环变量“topics”中的所有主题
用于（主题中的索引）{
//控制台测试
console.log（主题[index].posted）；
变量行=$（“”）；
行。追加（“+主题[索引].contents+”）；
行。追加（“+主题[索引].author+”）；
行。追加（“+主题[索引]。回复+”）；
//topicOnClick（行，主题[索引]）；
individualTopicTable.append（行）；
}
第页。追加（个人主题可打印）；
//最后，将页面添加到我们的web应用程序中
$（“#主要内容”）.html（第页）；
}

您可以使用查找主题。请注意，下面我使用的是旧浏览器不支持的es6字符串和箭头函数（只是为了快速演示）

const someTopics=[
{标题：“一些其他主题”，关注者：280人，文章：5篇，帖子：[
{postId:101，内容：“虚拟内容a”，回复：[
{回复ID:1，内容：“虚拟内容a”，作者：“蓝色男孩”}，
{replyId:2，内容：“虚拟内容a”，作者：“Blue baggers”}，
{回复ID:3，内容：“虚拟内容a”，作者：“Chelsea_2017”}
]}
]},
{标题：“足球话题”，关注者：280人，文章：5篇，帖子：[
{postId:101，内容：“虚拟内容b”，回复：[
{回复ID:1，内容：“虚拟内容b”，作者：“蓝色男孩”}，
{replyId:2，内容：“虚拟内容b”，作者：“Blue baggers”}，
{回复ID:3，内容：“虚拟内容b”，作者：“Chelsea_2017”}
]}
]}
];
函数getSingleTopic（主题，topicTitle）{
返回topics.find（topic=>topic.title==topicTitle）；
}
const footballTopic=getSingleTopic（someTopics，“Football Topics”）；
//console.log（'footbalTopics:'，footballTopic主题）；
// ----------------
//使用forEach或map在posts数组上迭代，例如。
document.querySelector（'.topic title'）。innerText=footballTopic.title；
document.querySelector（'.topic followers count'）。innerText=footballTopic.followers；
const posts=footballTopic.posts.map（post=>{
const repries=post.repries.map（reply=>
`${reply.contents}。由${reply.author}`编写；
返回`
${post.contents}
${repress.join（'\n'）}
`;
});
document.querySelector（'.topic posts'）。innerHTML=posts.join（'\n'）

然后：
除了@Jamiec的评论，您还可以获得更快/更好的答案。在这些情况下，分割“数据”和“渲染”函数通常很有用。例如，不要试图通过将代码添加到页面来立即测试代码。创建一个名为
getSingleTopic
的函数，并首先测试它。它应该作为您的数据集的输入，以及它应该选择的主题。它应该返回另一个对象/数组，其中包含您感兴趣的内容
showSingleTopic
应该可以处理该输出，并且只将其绘制到屏幕上。转到lodash库，它有一些很酷的方法。基本上就是我想要的。我该怎么把它翻译成一张桌子呢？
    //onClick function
        function topicOnClick (node, topic){
            'use strict';
            node.on("click", function() {
                showSingleTopic(topic);
            });
    }

//function for showing initial forum page
    function showForum () {

        'use strict';


        $(".homePage").hide();
        $("#registerPage").hide();
        $("#aboutPage").hide();
        $("#loginPage").hide();
        $("#browsePage").show();


        var page = $("#browsePage");

        var topicTable = $("<table class='forumTable'><tr><th>Title</th><th>Posts</th><th>Followers</th></tr></table>");

        //console test
        //console.log(topics);


        //Looping all topics in variable "topics"
        for (index in topics) {
            //console test
            console.log(topics[index].title);
            var row = $("<tr></tr>");
            row.append("<td>" + topics[index].title + "</td>");
            row.append("<td>" + topics[index].articles + "</td>");
            row.append("<td>" + topics[index].followers + "</td>");

            topicOnClick(row, topics[index]);


            topicTable.append(row);

        }

        page.append(topicTable);

        //Finally, add the page to our web app
        $("#maincontent").html(page);

    }


//this function isn't working in the ways I want it to as I'm not sure how to retrieve my replyId, contents and author from within my array
    function showSingleTopic (topicDetails){
        'use strict';
        alert(topicDetails.title);

        $(".homePage").hide();
        $("#registerPage").hide();
        $("#aboutPage").hide();
        $("#loginPage").hide();
        $("#browsePage").hide();

        var page = $("#individualForumPage");
        //page.append("<h1>"topicDetails.title"</h1>")

        var individualTopicTable = $("<table class='forumTable'><tr><th>Contents</th><th>Author</th><th>Replies</th></tr></table>");

        //Looping all topics in variable "topics"
        for (index in topics) {
            //console test
            console.log(topics[index].postId);
            var row = $("<tr></tr>");
            row.append("<td>" + topics[index].contents + "</td>");
            row.append("<td>" + topics[index].author + "</td>");
            row.append("<td>" + topics[index].replies + "</td>");

            //topicOnClick(row, topics[index]);


            individualTopicTable.append(row);

        }

        page.append(individualTopicTable);

        //Finally, add the page to our web app
        $("#maincontent").html(page);

    }