javascript - Jquery/JavaScript - 检索数组变量

Question

有点冗长的问题，所以我会切入正题。我已经建立了一个包含一些内容的变量数组，内容子数组设置如下:(小片段只是为了了解事物的概念)

var topics = [

    {title: "Football Topics", followers: 280, articles: 5, posts: [
        {postId: 101, contents: "Dummy content", replies:[
            {replyId: 1, contents: "Dummy content", author: "Boys_In_Blue"},
            {replyId: 2, contents: "Dummy content", author: "Blue-baggers"},
            {replyId: 3, contents: "Dummy content", author: "Chelsea_2017"}
        ]}
    ]}
];

在这个数组中，我打算在一些表格 div 中设置一个模拟论坛系统。核心功能有效，因为用户可以与初始表格屏幕设置交互，显示 table_row 说明足球主题，但在点击事件时，我只看到未定义的表格内容，因为我不确定如何检索我正在尝试访问的适当数据。我遇到的主要困惑和复杂性与能够检索这些变量(即 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);

    }

Answer 1

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

const someTopics = [
    {title: "Some other Topics", followers: 280, articles: 5, posts: [
        {postId: 101, contents: "Dummy content a", replies:[
            {replyId: 1, contents: "Dummy content a", author: "Boys_In_Blue"},
            {replyId: 2, contents: "Dummy content a", author: "Blue-baggers"},
            {replyId: 3, contents: "Dummy content a", author: "Chelsea_2017"}
        ]}
    ]},
    {title: "Football Topics", followers: 280, articles: 5, posts: [
        {postId: 101, contents: "Dummy content b", replies:[
            {replyId: 1, contents: "Dummy content b", author: "Boys_In_Blue"},
            {replyId: 2, contents: "Dummy content b", author: "Blue-baggers"},
            {replyId: 3, contents: "Dummy content b", author: "Chelsea_2017"}
        ]}
    ]}
];

function getSingleTopic(topics, topicTitle) {
    return topics.find(topic => topic.title === topicTitle);    
}

const footballTopic = getSingleTopic(someTopics, 'Football Topics');

//console.log('footbalTopics:', footballTopic);

// ----------------
// Use forEach or map to iterate over the posts array e.g.

document.querySelector('.topic-title').innerText = footballTopic.title;
document.querySelector('.topic-followers-count').innerText = footballTopic.followers;

const posts = footballTopic.posts.map(post => {
    const replies = post.replies.map(reply =>
      `<div class="post-reply">${reply.contents}. Written by ${reply.author}</div>`);

    return `
      <div class="post">
        <div class="post-content">${post.contents}</div>
        <div class="post-replies">${replies.join('\n')}</div>
      </div>
    `;
});

document.querySelector('.topic-posts').innerHTML = posts.join('\n');

<h1 class="topic-title"></h1>
<div class="topic-followers">Followed by: <span class="topic-followers-count"></span></div>
<div class="topic-posts"></div>