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>