Jquery/JavaScript - Retrieving array variables

Question

bit of a long winded-question so I'll cut right to the chase. I've established a variable array containing some content with a sub-array of content set up as follows: (small snippet just to get the idea of things)

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"}
 ]}
 ]}
];

Within this array, I've intended to set up a mock-forum system within some table div's. The core functionality works, as the user can interact with the initial table screen set up, displaying a table_row stating Football topics, but upon the on-click event, I'm only presented with undefined table content, because I'm unsure of how to retrieve the appropriate data I'm trying to access. The major confusion and complexity I'm having is in relation to being able to retrieve these variables (i.e; the replyId, contents and author) and present them within in accordance with what the previous forum attribute was set -- meaning if the user selected "football topics", they'd only be presented with appropriate football related topics etc.

Appreciate any assistance!

 //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);
 }

• Jamiec: You'll get quicker/better answers with a minimal reproducible example
• shotor: In addition to comment by @Jamiec. It's often useful in these cases to split your "data" and "render" functions. For instance, instead of trying to immediately test your code by adding it to the page. Create a function called getSingleTopic and test that first. It should have as input your data set, and the topic it should select. It should return another object/array with just the stuff you are interested in. showSingleTopic should work on that output and only draw it to the screen.
• zabusa: go to lodash library it has some cool methods.

Answer 1

You can find a topic using Array.prototype.find. Note that below I'm using es6 strings and arrow functions which old browsers don't support (just for a quick demo).

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>

• Jordy: Essentially What I'm after. How would i go about then translating this into a table?