Fonction JavaScript ne récupérant pas les éléments du tableau

Question

J'ai un tableau d'éléments (dont je vais montrer 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 du tableau éléments et les présenter dans une table, qui pour mes deux fonctions initiales fonctionne de manière transparente, mais en dupliquant ma fonction précédente et en changeant la dénomination et les références des variables appropriées, la deuxième fonction échoue à afficher les éléments du tableau à l'écran.

Je cherchais d'éventuelles erreurs de références ou des éléments manquants mineurs, mais je suis à court de ressources.

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 tableau très minimes fonctions d'événement onClick pour afficher des 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 tableau:

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 essayant de présenter les éléments du tableau à l'écran via la table éléments:

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 double qui n'affiche pas à l'écran (ne récupère pas les éléments du tableau soit):

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 passez au clic gestionnaire semble être incorrect. Vous avez:

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

Mais il devrait probablement:

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

Le poste que vous faites référence déjà présente les « détails » clés de l'enfant qui est fait référence dans showComments(). Votre code d'origine applique l'index à un tableau différent de celui dont il était originellement dérivé.