CODEWITHSUNDEEP
javascriptjqueryarraysfor-loopvar
Jordy
Jordy

Reputation: 217

JavaScript function not retrieving array elements

I have an array of elements (which I'll show a snippet of below), with different levels of array elements, and I'm wanting a specific function to retrieve a certain level of the array elements and present them in a table, which for my initial two functions works seamlessly, but upon duplicating my previous function and changing the appropriate variable naming and references, the second function fails to successfully display array elements to screen.

I have been looking for possible mis-references or minor missing elements, but I'm at a loss.

Here is my var array:

{title: "Basketball Topics", followers: 122, articles: 4, posts: [
    {postId: 106, contents: "data", author: "data", replies:[
        {replyId: 16, comment: "data", comment_author: "data"},
        {replyId: 17, comment: "data", comment_author: "data"},
        {replyId: 18, comment: "data", comment_author: "data"}
    ]},
]}

Here are some very minimal table onClick event functions for displaying appropriate pages

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

function threadOnClick (node, topic){
    'use strict';
    node.on("click", function() {

        showComments(topic);
    });
}

Here are my array referencing functions:

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

function getSingleComment(someTopics, topicTitle) {
    return someTopics.find(function (topic) {
        return topic.contents === topicTitle;
    });    

}

Here are the loops trying to present the array elements to screen via table elements:

function showSingleTopic (topicDetails){

    'use strict';

    var page = $("#individualForumPage");

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



        for (index in topicDetails.posts) {

                        var post = topicDetails.posts[index]; 
        var row = $("<tr></tr>");
        row.append("<td>" + post.contents + "</td>");
        row.append("<td>" + post.author + "</td>");

        threadOnClick(row, topics[index]);
        individualTopicTable.append(row);

        }
    page.html(individualTopicTable);
}

And here is the duplicate function that doesn't display to screen (doesn't retrieve array elements either):

function showComments (commentDetails){

    'use strict';

    var page = $("#commentsPage");


    var commentTable = $("<table class='forumTable'><tr><th>Author</th><th>Comments</th></tr></table>");



        for (index in commentDetails.replies) {

                        var reply = commentDetails.replies[index]; 

        var row = $("<tr></tr>");
        row.append("<td>" + reply.comment_author + "</td>");
        row.append("<td>" + reply.comment + "</td>");

        commentTable.append(row);

        }

page.html(commentTable);


}

Upvotes: 2

Views: 60

Answers (1)

RichGoldMD
RichGoldMD

Reputation: 1282

In your showSingleTopic the value you are passing to the click handler appears to be incorrect. You have:

threadOnClick(row, topics[index]);
individualTopicTable.append(row);

But it should probably be:

threadOnClick(row, post);
individualTopicTable.append(row);

The post you are already referencing has the child key 'details' which is referenced in showComments(). Your original code applies the index to a different array than the one it was originally derived from.

Upvotes: 1

Related Questions