Mohamed  Kira Mohamed Kira - 3 months ago 10
Ajax Question

javascript loop thought bootstrap

I have a simple bootstrap page I need to load JSON data into it:

This is my script:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var tweets = JSON.parse(xhr.responseText);

var tweet = ' <div class="col-xs-12 col-sm-6 col-md-8 col-md-offset-3">';
var name = ' <h4 class="card-title">';
var photo = ' <div class="col-md-4 col-md-offset-3"><div class="col-md-4 ">';

for (var i = 0; i < tweets.length; i += 1) {

name += tweets[i].name;
name += '</h4> </div>';

tweet += ' <div class="jumbotron">';
tweet += ' <p class="card-text">';
tweet += tweets[i].tweet;
tweet += "<br>";
tweet += "</p></div></div>";

photo += ' <img class="img-responsive img-circle" src="user/';
photo += tweets[i].activation;
photo += '/';
photo += tweets[i].pic;
photo += '"></div></div>';

document.getElementById('photo').innerHTML = photo;
document.getElementById('name').innerHTML = name;
document.getElementById('tweet').innerHTML = tweet;

// close all html tags
}
}
};
xhr.open('GET', 'empdata.json');
xhr.send();


And this is my HTML:

<div class="container">
<div class="card">
<div class="card-header">
<div class="row">
<div id="photo">
<!-- here where the pic goes ! -->
</div>
<div id="name">
<!-- here where the name goes ! -->
</div>
</div>
<div class="card-block row">
<div id="tweet">
<!-- here where the tweet goes ! -->
</div>
</div>
</div>
</div>
</div>
</div>

<div class="card-block row">
<div id="tweet"> </div>
</div>


It loops correctly through all JSON data, but it displays all the pictures first then the names and finally the tweets separately. think the problem is related to the mechanism I follow in the loop.

Answer

I think you mean to do this. It can be much simpler but without changing your html I would do this:

for (var i=0; i<tweets.length; i += 1) {
    var name = ' <h4 class="card-title">';
    name += tweets[i].name;
    name += '</h4> </div>';
    var tweet = '<div class="col-xs-12 col-sm-6 col-md-8 col-md-offset-3">'
    tweet += ' <div class="jumbotron">';
    tweet += '  <p  class="card-text">';
    tweet += tweets[i].tweet;
    tweet += "<br>";
    tweet += "</p></div></div>";
    var photo ='<div class="col-md-4 col-md-offset-3"><div class="col-md-4 ">' 
    photo += '  <img class="img-responsive img-circle" src="user/';
    photo += tweets[i].activation;
    photo += '/';
    photo += tweets[i].pic;
    photo += '"></div></div>';

    var container = document.querySelector(".container");
    container.innerHTML+='<div class="card"><div class="card-header">'+
    photo+name+tweet+'</div></div>';

}