javascript loop thought bootstrap

Question

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.

to display the tweet and its corresponding data(name and pic), but instead javascript loops through all pictures then name and then tweet all separately — Mohamed Kira
– Mohamed Kira, Commented Aug 31, 2016 at 13:26

mplungjan · Accepted Answer · 2016-08-31 14:44:38Z

1

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

var container = document.querySelector(".container");
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>';

    container.innerHTML+='<div class="card"><div class="card-header">'+
    photo+name+tweet+'</div></div>';
}

edited Aug 31, 2016 at 14:44

answered Aug 31, 2016 at 13:35

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mplungjan Over a year ago

Better move the var container = document.querySelector(".container"); outside the loop - also if you need, concatenate the html to a var and after the loop add that var to the container

Sasha · Accepted Answer · 2016-08-31 13:38:53Z

0

EDITED Try set innerText outside from the loop

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

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

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

edited Aug 31, 2016 at 13:38

answered Aug 31, 2016 at 13:29

Sasha

194 bronze badges

Collectives™ on Stack Overflow

javascript loop thought bootstrap

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related