There is a code that displays entries from VC:

<div id="answerPlaceHolder"></div> <script> var placeHolder = $('#answerPlaceHolder'); var url = 'https://api.vk.com/method/wall.get?owner_id=-78812318&count=20&filter=all&v=5.45'; var answer; $.ajax ({ url:url, type:'get', crossDomain:true, dataType:'jsonp', success:function(response) { answer = response; var counter = 1; answer.response.items.forEach(function(item) { // console.log('Пост № ' + counter); if ((item.text != 'undefined') && (item.text != '')) { placeHolder.append('<div class="blog-header">' + item.text + '</div>'); //console.log(item.text); } // console.log(item); if ((typeof(item.attachments) != = 'undefined') && (item.attachments[0].type == 'photo') && (typeof(item.attachments[0].photo.photo_604) != = 'undefined')) { placeHolder.append( '<img width="560px;" src="' + item.attachments[0].photo.photo_604 + '"> <div class="blog-share"><a href="http://gamer-by-life.com/share/?title=' + item.text + '&img=' + item.attachments[0].photo.photo_604 + '&time=' + item.date + '"><img src="share.png"></a></div>' ); // console.log(item.attachments[0].photo.photo_604); } counter++; console.log('******************************\n'); placeHolder.append('<br>'); }); }, error: function(error) { console.log('Ошибка'); console.log(error); } }); </script>

Posts are displayed in this format:

 <div class="blog-header">Тут текст (когда он есть) </div><img width="560px;" src="картинка"><br>

How to do what would be displayed in this:

 <div class="post"><div class="blog-header">Тут текст (когда он есть) </div><img width="560px;" src="картинка"><br></div>

    2 answers 2

    Inside forEach:

    1. Create a post element.
    2. In placeHolder put this post.
    3. And the content (blog-header and image) already need to be put in the post element itself.

    It should turn out like this:

     //... answer.response.items.forEach(function(item) { // console.log('Пост № ' + counter); var post = $("<div class='post'>"); placeHolder.append(post); if ((item.text != 'undefined') && (item.text != '')) { post.append('<div class="blog-header">' + item.text + '</div>'); //console.log(item.text); } // console.log(item); if ((typeof(item.attachments) !== 'undefined') && (item.attachments[0].type == 'photo') && (typeof(item.attachments[0].photo.photo_604) !== 'undefined')) { post.append('<img width="560px;" src="' + item.attachments[0].photo.photo_604 + '"> <div class="blog-share"><a href="http://gamer-by-life.com/share/?title=' + item.text + '&img=' + item.attachments[0].photo.photo_604 + '&time=' + item.date + '"><img src="share.png"></a></div>'); // console.log(item.attachments[0].photo.photo_604); } counter++; console.log('******************************\n'); post.append('<br>'); }); //...
    • for some reason it closes the div itself because of this, <div class = "post"> </ div> - arthru
    • @arthru, look, everything works: jsfiddle.net/uskcdauo - skubarenko

    You need to add <div class="post"> to this line placeHolder.append('<div class="blog-header">' + item.text + '</div>');

    It turns out like this:

      placeHolder.append('<div class="post"><div class="blog-header">' + item.text + '</div></div>');
    • there we still have a picture at the bottom, it turns out then after the post it will be displayed, but we need something inside - arthru