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>