Iterating through an array of arrays to generate a string

JavaScript
1

I’m messing around with something that would generate some html from an array.
I want to pull the 1st time and plug that into a h1 and the 2nd through nth items of each array to make an unordered list on a page.

I’m very weak in the for loop thing but I think I have the loop working, I just don’t seem to get all the results of the loop just the first result.

Only the initial result of the loop is added to the page. Property21. I would like to end up with Property21, Property22, Property23 added to the page and ideally a
after each.

  <script>
    var list = [
      ["Property00", "Property01", "Property02", "Property03"],
      ["Property10", "Property11", "Property12", "Property13", "Property14", "Property15"],
      ["Property20", "Property21", "Property22", "Property23"],
      ["Property30", "Property31", "Property32"]
    ];

    function init() {
      var arr = [];

      var myOptions = function() {

        for (var i = 2; i < 3; i++) {
          for (var j = 1; j < list[i].length; j++) {
              console.log(list[i][j]);
              return list[i][j];
          }
        }
      }
      document.getElementById("title").innerHTML = list[0][0];
      document.getElementById("options").innerHTML = myOptions();
    }
  </script>```
2

return list[i][j];

Return a function means stopping the execution of that function and specify a values, therefore your loop will stop its execution at:

list[2][1] // "Property21"

More on return

You may want to get rid of that return :slight_smile:

On a side note I’m not really sure what your ultimate goal is, so if you care to explain it a bit more in I can try to help you more in details.

For example if you want to create a new li for each entry of an array, assuming you still want to use for as a looping method:

// html
<ul id='list'></ul>

//js
function exampleOfLooping(arr){
  const list = document.getElementById('list'); // get the ul node;

  for (var i = 0; i < arr.length; i++ ) { // loop into the array
    var li = document.createElement("li"); // create a new li every time
    li.innerHTML = arr[i]; // set its content
    list.appendChild(li); // append it to the ul
  }

}
3

Yes, that is exactly what I wanted to do! I’m always getting confused by return. I will read that and try a few things to make sure I understand it.