What is wrong with this for loop?

Question

Hi guys I have an array that I'm trying to append to the DOM! Here is the code:

function inputFeedContent(data){
    for(var k=0; k < columns; k++) {
        var col = "<div class='col-1'>";
        for(var j=0; j < data.sample[k].length; j++) {
            col += "<p>"+data.sample[k][j]+"</p>";
        }
        col += "</div>";
        $('.sliding-window').append(col);
    }
}

where columns = 12.

Problem is I only get five of these:

<div class="col-1">
    <p>Some text</p>
</div>

What am I doing wrong here? Keep in mind I'm a noob :)

Thanks!

Data length = 5. I want to achieve 12 columns <div class="col-1"></div> each containing five <p>Content</p> — Ismailp
– Ismailp, Commented Jan 8, 2013 at 20:40
columns looks like it could be a magic number? How does columns get assigned 12? — fusion27
– fusion27, Commented Jan 8, 2013 at 20:40
I have an other loop that goes through the headers so columns = data.headers.length; — Ismailp
– Ismailp, Commented Jan 8, 2013 at 20:47

Niklas9 · Accepted Answer · 2013-01-08 21:38:06Z

1

I think you're trying to print each column separately, hence not row after row. Try this:

function inputFeedContent(data) {
    for(var k=0; k < columns; k++) {
     var col = "<div class='col-1'>";
     for(var j=0; j < data.sample.length; j++) {
        col += "<p>"+data.sample[j][k]+"</p>";
     }
     col += "</div>";
     $('.sliding-window').append(col);
    }
}

answered Jan 8, 2013 at 21:38

Niklas9

9,5068 gold badges42 silver badges61 bronze badges

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

Comments

Sudhanshu Yadav · Accepted Answer · 2013-01-08 20:42:43Z

0

May be your array dont have 12 columns so instead of defining columns as global variable try this

function inputFeedContent(data){
var col=[];
for(var k=0; k < data.sample.length; k++) {

       col.push("<div class='col-1'>");
        for(var j=0; j < data.sample[k].length; j++) {
            col.push("<p>"+data.sample[k][j]+"</p>");
        }
        col.push("</div>");

    }
$('.sliding-window').append(col.join(''));
}

I will also suggest you to avoid string concatination as it is not efficient in loop and do dom access once by keeping it outside the loop.

answered Jan 8, 2013 at 20:42

Sudhanshu Yadav

2,33319 silver badges18 bronze badges

Comments

Briguy37 · Accepted Answer · 2013-01-08 20:48:35Z

If data does not contain the right number of columns, you'll get errors and it'll stop adding to your page. You can make sure the columns are initialized properly with something like the following:

function inputFeedContent(data){
    var sampleData = data.sample || [];
    for(var k=0; k < columns; k++) {
        var col = "<div class='col-1'>";
        var columnData = sampleData[k] || [];

        for(var j=0; j < columnData.length; j++) {
            col += "<p>"+columnData[j]+"</p>";
        }
        col += "</div>";
        $('.sliding-window').append(col);
    }
}

...But likely this case should not be supported to begin with and you should throw an error:

function inputFeedContent(data){
    var sampleData = data.sample || [];
    if(sampleData.length != columns){ 
        throw "inputFeedContent:  Sample data does not have the right number of columns.";
    }

    ..//Your code
}

Collectives™ on Stack Overflow

What is wrong with this for loop?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related