jquery - JSON+Ajax append and create a dynamic Div -
i trying create html page of parts static , loaded json files.
i trying create "posts" , attach "comments" them. have 2 json files: posts.json , comments.json.
posts.json contains following:
[{"name":"liza","date":"december 22 2016","content":"what nice profile.","id":"1"}, {"name":"tom","date":"december 23 2016","content":"good luck in new job.","id":"2"}] comments.json cointains following:
[{"name":"bob jacobs","comment":"how nice of say","id":"1"}, {"name":"rob sherman","comment":"indeed nice profile!","id":"1"}, {"name":"roni james","comment":"you couldn't of wished him better :-)","id":"2"}] what trying match comments posts while creating div post matching comment id post id(if same match) unable cause miss way define sub div class name , therefore unable set properly(currently set o '2' 1 of id's) don't know how eliminate situation comment id-'2' wont attached post id-'1'.
here of html code involved:
<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 may intest you:</p> <div class="forposition"></div> </div> </div> <!--footer--> <footer class="container-fluid text-center"> <p class="glyphicon glyphicon-copyright-mark"> created sorokina e. 333815611 , menaker t. 201096690 </p> </footer> <!--my js 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 " +value.name +" - "+value.date+"</span><br><div class=\"divstyle\">"+value.content+"</div><br><button class=\"mybutton\">like</button>   <button class=\"mybutton\">comment</button>   <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>");} }); }); }); thanks help, tom
what suggest try place comment each post in post oject, ex :
[ { "id": 1, "name": "liza", "date": "december 22 2016", "content": "what nice profile.", "comments": [ { "name": "bob jacobs", "comment": "how nice of say" }, { "name": "rob sherman", "comment": "indeed nice profile!" } ] }, { // other post } ] this way, can loop in comments each time create post using simple jquery loop. ex:
$(document).ready(function(){ var post = {} // here goes json.parse of yours post object $.each(post, function($postindex, $post){ $(".forposts").append("<div class=\"divstyle2\"><span class=\"mytext2\">posted " +$post.name +" - "+$post.date+"</span><br><div class=\"divstyle\">"+$post.content+"</div><br><button class=\"mybutton\">like</button>   <div class=\"comments\"></div>"); $.each($post.comments, function($commentindex, $comment) { $(".forposts").children().last().find(".comments").append("<button class=\"mybutton\">comment</button>   <button class=\"mybutton\">show/hide comment</button></div><div class='2'></div><br>"); }); }); }); this should work, have not tested it, there might have few syntax error basicly i'm looping in post , in comments adding each comment last children of $('.forpost') added lst post added in previous loop. hopes helps !
- nic
Comments
Post a Comment