Question

我正在尝试创建一个html页面，其大部分部分当前是静态的，并且是从JSON文件加载的。

我正在尝试创建一些＆＃34;帖子＆＃34;并附上＆＃34;评论＆＃34;给他们。目前我有两个JSON文件：posts.JSON和comments.JSON。

posts.JSON包含以下内容：

[{"Name":"Liza","Date":"December 22 2016","Content":"What a nice profile.","Id":"1"},
{"Name":"Tom","Date":"December 23 2016","Content":"Good luck in your new job.","Id":"2"}]

comments.JSON包含以下内容：

[{"Name":"Bob Jacobs","Comment":"How nice of you to say","Id":"1"},
{"Name":"Rob Sherman","Comment":"Indeed a nice profile!","Id":"1"},
{"Name":"Roni James","Comment":"You couldn't of wished him something better :-)","Id":"2"}]

我想要做的是在通过将评论ID与帖子ID匹配（如果它们与匹配相同）为帖子创建div时将评论与帖子匹配但是我无法做到这一点我想念一种定义sub div类名的方法，因此无法正确设置它（目前它的设置只是＆＃39; 2＆＃39;这是id的其中一个）我也没有知道如何消除具有id - ＆＃39; 2＆＃39;的评论的情况。不会附加到ID为＆＃39; 1＆＃39;。

的帖子

以下是一些涉及的HTML代码：

<div class="row" id="middle">
          <div class="col-sm-8" id="left">
               <div class="forPosts"></div>
          </div>

          <div class="col-sm-4" id="right">
               <p class="myText">Jobs that may intest you:</p>
               <div class="forPosition"></div>
          </div>
      </div>




    <!--Footer-->
    <footer class="container-fluid text-center">
      <p  class="glyphicon glyphicon-copyright-mark"> &nbsp;Created by Sorokina E. 333815611 and Menaker T. 201096690 </p>
    </footer>

    <!--My JS for tooltip-->
    <script>

    $(document).ready(function(){

      $.getJSON("../files/posts.json",function(result){
          $.each(result, function (index, value) {
            $(".forPosts").append("<div class=\"divStyle2\"><span class=\"myText2\">Posted by " +value.Name +" - "+value.Date+"</span><br><div class=\"divStyle\">"+value.Content+"</div><br><button class=\"myButton\">Like</button>&nbsp &nbsp<button class=\"myButton\">Comment</button>&nbsp &nbsp<button class=\"myButton\">Show/hide comment</button></div><div class='2'></div><br>");
          });
        });

        $.getJSON("../files/comments.json",function(result){
            $.each(result, function (index, value) {
              var $x = document.getElementsByClassName(""+value.id);
              if($x==value.id){
              $("."+x).append("<div class=\"divStyle2\"><span class=\"myText3\">" +value.Name +" : "+value.Comment+"</span><br></div>");}
            });
          });
});

感谢您的帮助，汤姆

Answer 1

我建议做的是尝试将每个帖子的评论放在帖子中，例如：

[
    {
        "id": 1,
        "name": "Liza",
        "date": "December 22 2016",
        "content": "What a nice profile.",
        "comments": [
            {
                "name": "Bob Jacobs",
                "Comment": "How nice of you to say"
            },
            {
                "name": "Rob Sherman",
                "comment": "Indeed a nice profile!"
            }
        ]
    },
    {
    // other post
    }
]

这样，每次使用简单的jquery循环创建帖子时，您都可以简单地循环注释。例如：

$(document).ready(function(){
    var post = {} // Here goes your JSON.parse of yours post object
    $.each(post, function($postIndex, $post){
        $(".forPosts").append("<div class=\"divStyle2\"><span class=\"myText2\">Posted by " +$post.Name +" - "+$post.Date+"</span><br><div class=\"divStyle\">"+$post.Content+"</div><br><button class=\"myButton\">Like</button>&nbsp &nbsp<div class=\"comments\"></div>");
        $.each($post.comments, function($commentIndex, $comment) {
                $(".forPosts").children().last().find(".comments").append("<button class=\"myButton\">Comment</button>&nbsp &nbsp<button class=\"myButton\">Show/hide comment</button></div><div class='2'></div><br>");
        });
    });
});

这应该有用，我还没有测试过，所以可能会有一些语法错误，但基本上我会在你的帖子中循环，然后在你的评论中将每条评论添加到$('.forPost')的最后一个孩子添加了这是我们在上一个循环中添加的第一篇文章。希望这会有所帮助！

Nic

JSON + Ajax附加并创建动态Div

1 个答案: