La fonction JavaScript ne récupère pas les éléments d'un tableau

Question

J'ai un tableau d'éléments (dont je montrerai un extrait ci-dessous), avec différents niveaux d'éléments de tableau, et je veux une fonction spécifique pour récupérer un certain niveau d'éléments de tableau et les présenter dans un tableau, ce qui pour mes deux fonctions initiales fonctionne sans problème, mais en dupliquant ma fonction précédente et en changeant le nom et les références des variables appropriées, la deuxième fonction ne parvient pas à afficher les éléments de tableau à l'écran.

J'ai cherché d'éventuelles références erronées ou des éléments mineurs manquants, mais je n'ai rien trouvé.

Voici mon tableau var :

{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"}
    ]},
]}

Voici quelques fonctions minimales de l'événement onClick du tableau pour afficher les pages appropriées

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

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

        showComments(topic);
    });
}

Voici mes fonctions de référencement de tableaux :

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

}

Voici les boucles qui tentent de présenter les éléments du tableau à l'écran par le biais d'éléments de tableau :

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

Et voici la fonction dupliquée qui ne s'affiche pas à l'écran (elle ne récupère pas non plus les éléments du tableau) :

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

}

Answer 1

Dans votre showSingleTopic, la valeur que vous transmettez au gestionnaire de clics semble incorrecte. Vous avez :

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

Mais il devrait l'être :

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

Le message auquel vous faites déjà référence possède la clé enfant "details" qui est référencée dans showComments(). Votre code original applique l'index à un tableau différent de celui dont il est dérivé à l'origine.