Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

What I'm trying to output with JS:

<ul>
  <li>title1
    <ul>
      <li>image1</li>
      <li>image2</li>
      <li>image3</li>
   </ul>
  </li>
  <li>title2
    <ul>
      <li>image1</li>
      <li>image2</li>
      <li>image3</li>
   </ul>
  </li>

...and so forth...

</ul>

JSON:

var data = [
    {
        title: "title1", 
        image:["image1", "image2", "image3"]
    },
    {
        title: "title2", 
        image:["image1", "image2", "image3"]
    },
    {
        title: "title3", 
        image:["image1", "image2", "image3"]
    },
    {
        title: "title4", 
        image:["image1", "image2", "image3"]
    }
];

My JS

for(var i=0; i < data.length; i++) {
  var item = data[i];
  var obj = {
      title:item.title,
      image:item.image
  };
  var theimages;
  var html = '';

    for(j=0; j < item.image.length; j++) {
         theimages = '<li>' + item.image[j] + '</li>'; 
    }

html += '<li>' + item.title + '<ul>';
html += theimages;
html += '</ul></li>';
} 
console.log(html);

Can someone explain how do I get the value of the inner for loop and combine it with the outer for loop so that I end up with output I'm trying to achieve. currently I end up with this:

<li>title4
  <ul>
    <li>image3</li>
  </ul>
</li>
share|improve this question
    
Inside your for loop, you should use += as in theimages += ... so it always adds to the end of the string, instead of replacing it. –  Puuskis Jun 26 '13 at 9:41
    
You are overwriting the images variable in the for loop. –  karthick Jun 26 '13 at 9:41

2 Answers 2

up vote 0 down vote accepted

the problem is that you overwrite the html variable in every iteration of the outer for-loop.

If you declare this variable before the loop, you get the right result. Also you don't want to overwrite the theimages variable everytimes, but append the new portion to it.

var html = '';
for(var i=0; i < data.length; i++) {
  var item = data[i];
  var theimages = '';
  for(j=0; j < item.image.length; j++) {
    theimages += '<li>' + item.image[j] + '</li>'; 
  }

  html += '<li>' + item.title + '<ul>';
  html += theimages;
  html += '</ul></li>';
} 
console.log(html);

Also I have removed your obj-variable, since you did not use it anyway.

Just use this pattern, if you build strings: var myString = '' for(item ...) { myString += item } At first initialize the string, then append.

share|improve this answer
    
Awesome...that worked. Was very frustrating seeing how I close I was. Thanks very much! –  xpo60rj Jun 26 '13 at 16:40

You just need to append it to the string, instead of reassigning the variable again and again:

var theimages;
var html = '<ul>';
for(var i=0; i < data.length; i++) {
  var item = data[i];
  var obj = {
      title:item.title,
      image:item.image
  };


for(j=0; j < item.image.length; j++) {
         theimages += '<li>' + item.image[j] + '</li>'; 
    }

html += '<li>' + item.title + '<ul>';
html += theimages;
html += '</ul></li>';
}  
html += '</ul>';
console.log(html);
share|improve this answer
    
@karthick he is already adding <ul> and </ul> –  Ankit Jaiswal Jun 26 '13 at 9:47
    
I get undefined after the ul and the inner loop looks to be incrementing by the outer forloop index... <ul> <li>title1 <ul>undefined <li>image1</li> <li>image2</li> <li>image3</li> </ul> </li> <li>title2 <ul>undefined <li>image1</li> <li>image2</li> <li>image3</li> <li>image1</li> <li>image2</li> <li>image3</li> </ul> </li> ....and so forth.... </ul> –  xpo60rj Jun 26 '13 at 16:32

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.