For loop not rendering content in partial

Question

I'm trying to pass data to my partial which has a for loop. It seems the loop itself breaks:

<!-- Current Tweet Partials -->
<script id="active-tweet-partial" type="underscore/template">
    <section class="tweetFlexItem">

    <% console.log(sqTweetData.text); %>

    <% for (var i = 0; i < sqTweetData.length; i++) { %>
        <div class="activeTweet">
            <div class="activeTweet__wrapper">
                <div class="activeTweet__message"><%= sqTweetData[ i ].text %></div>
            </div>
        </div>
    <% } %>

    </section>
</script>

The console.log works and gives me the text I am looking for, however the for loop isn't working. If I place an alert(); inside the for loop, it does not run.

Any thoughts?

EDIT: Including Javascript

var Home = (function() {

var twitterData = {
    user: [{
        profile_image_url : "assets/avatar.png",
        name : "@johnsnow"
    }],
    text : "Someone once said that I know nothing..."
};

// Partials
var tweetPartial = $('#active-tweet-partial').html();
    tweetPartialCompiled = _.template( tweetPartial );

// DOM Handlers
function getTweetData() {
    return twitterData;
}

sqTweetData = getTweetData();

// KICKSTART VIEW
function initHome() {

    // load main content
    $('#main-content').html(tweetPartialCompiled( sqTweetData ));

}
return {
    init: initHome
};

})();

Don't know what the structure of sqTweetData is, but it looks like in your console.log you are assuming it is an object and in your loop, you are assuming it is an array. If one is working I would assume the other isn't. Unless it is an object that looks like this {text:'',1:'',2:'',3:'', etc} — peinearydevelopment, Dec 09 '15 at 13:56
I don't know what you are trying to display in your for loop. sqTweetData is an object. Are you trying to loop over the users and display some of their information? There is no text property on a user though so your question is very confusing. — peinearydevelopment, Dec 09 '15 at 14:00
I'm creating a Twitter aggregator and setting up my loop to display 1 tweet at a time with demo content, which is var twitterData. Currently trying to loop and grab the text from twitterData. — u111937, Dec 09 '15 at 14:03
twitterData is an object, not an array though, so how would you loop over it? Or are you trying to loop over its properties? — peinearydevelopment, Dec 09 '15 at 14:04
I suppose you would loop over an object by using 'for (var i in sqTweetData) ? Yes, I am trying to grab the properties in twitterData. — u111937, Dec 09 '15 at 14:10
http://stackoverflow.com/questions/684672/loop-through-javascript-object#answer-684692 — peinearydevelopment, Dec 09 '15 at 14:16
@peinearydevelopment Thanks for the help! Works now and I sincerely appreciate it. — u111937, Dec 09 '15 at 14:22

score 0 · Answer 1 · answered Dec 09 '15 at 14:52

It seems that my for loop was trying to loop through an array when I needed to loop through an object. I Fixed the issue by changing the loop and including .hasOwnProperty

    <% for (var i in sqTweetData) { %>
        <% if (sqTweetData.hasOwnProperty(i)) { %>
            <div class="activeTweet">
                <div class="activeTweet__avatar"><img src="<%= sqTweetData.user.profile_image_url %>"></div>
                <div class="activeTweet__wrapper">
                    <div class="activeTweet__name"><%= sqTweetData.user.name %></div>
                    <div class="activeTweet__message"><%= sqTweetData.text %></div>
                </div>
            </div>
        <% } %>
    <% } %>

This other post helped solve this issue:

Iterate through object properties

For loop not rendering content in partial

1 Answers1