Loop through Javascript Array

Question

I have the following array...

var structure = [
  [icon, "Section 1 Name",
    [icon, "Item 1.1"],
    [icon, "Item 1.2"]
  ],
  [icon, "Section 2 Name",
    [icon, "Item 2.1"],
    [icon, "Item 2.2"]
  ],
  [icon, "Section 3 Name",
    [icon, "Item 3.1"],
    [icon, "Item 3.2"]
  ]
];

And I would like to loop through it to populate my HTML structure in the following method...

<div id="section">
  <h1>Section 1 Name</h1>
  <a href="#">Menu Item 1.1</a><br />
  <a href="#">Menu Item 1.2</a>
  <h1>Section 2 Name</h1>
  <a href="#">Menu Item 2.1</a><br />
  <a href="#">Menu Item 2.2</a>
  <h1>Section 3 Name</h1>
  <a href="#">Menu Item 3.1</a><br />
  <a href="#">Menu Item 3.2</a>
</div>

I have been trying to find advice online about how to achieve this but most of the advice I have been able to find is more suited to multi-dimensional arrays which are used to show a data grid type of layout rather than heading and sub item structures.

Thanks

Icon is simply going to be a base64 data encode of the icon which will be put directly into the img src at a later date, was left out for this example for simplicity. — Chris Rutherfurd
– Chris Rutherfurd, Commented Mar 9, 2015 at 5:50
@bablu - Want to try and avoid using a third party framework like jQuery as this will be packaged in an internal framework and we want to avoid dependency on a third party library. — Chris Rutherfurd
– Chris Rutherfurd, Commented Mar 9, 2015 at 5:54

nkron · Accepted Answer · 2015-03-09 06:40:27Z

You can use nested for loops to do this.

    <pre id="output"></pre>
    <script>
        var icon='';
        var structure = [
          [icon, "Section 1 Name",
            [icon, "Item 1.1"],
            [icon, "Item 1.2"]
          ],
          [icon, "Section 2 Name",
            [icon, "Item 2.1"],
            [icon, "Item 2.2"]
          ],
          [icon, "Section 3 Name",
            [icon, "Item 3.1"],
            [icon, "Item 3.2"]
          ]
        ];
        
        var result = '<div id="section">\n';
        
        for (var i = 0; i < structure.length; i++) {
          var group = structure[i];
          result += '  <h1>' + group[1] + '</h1>\n'
          
          for (var j = 2; j < group.length; j++) {
            result += '  <a href="#">' + group[j][1] + '</a>';
        
            if (j < group.length - 1) {
              result += '<br />';
            }
            result += '\n';
          }
        }
        
        result += '</div>';
        
        document.getElementById('output').textContent = result;
    </script>

Anto S · Accepted Answer · 2015-03-09 06:23:17Z

0

Since you are not mentioning whats icon, I just assume that you are trying to give an image icon for each menu. With this assumption, try this html,

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap-theme.css" rel="stylesheet" type="text/css" />
<title>Array</title>
</head>
<body>
<div id="section"> </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
    var structure = [
  ['icon.jpg', "Section 1 Name",
    ['icon.jpg', "Item 1.1"],
    ['icon.jpg', "Item 1.2"]
  ],
  ['icon.jpg', "Section 2 Name",
    ['icon.jpg', "Item 2.1"],
    ['icon.jpg', "Item 2.2"]
  ],
  ['icon.jpg', "Section 3 Name",
    ['icon.jpg', "Item 3.1"],
    ['icon.jpg', "Item 3.2"]
  ]
];

var divi = '';
for (i = 0; i < structure.length; i++) {
    divi += '<h1>'+structure[i][1]+'</h1>';
    var elemets = structure[i][2];
    divi +=  '<a href="#">'+structure[i][2][1]+'</a><br /><a href="#">'+structure[i][3][1]+'</a>';
}
var element = document.getElementById("section").innerHTML = divi;
    </script>
</html>

edited Mar 9, 2015 at 6:23

answered Mar 9, 2015 at 5:52

Anto S

2,4576 gold badges35 silver badges52 bronze badges

1 Comment

Chris Rutherfurd Over a year ago

Tried the sample you have but it wound up outputting every section name and item as a h1 element and then repeating it twice as a hyperlink element, rather than having the section names as h1 elements and the items below those section names as hyperlinks under only their parent section.

Chris Rutherfurd · Accepted Answer · 2015-03-09 06:51:46Z

I have manged to work out what I was wanting to achieve...

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Array</title>
</head>
<body>
<div id="section"> </div>
<script>

var structure3 = [
	["icon.jpg", "Section 1 Name",
		[
			["icon", "Item 1.1"],
			["icon", "Item 1.2"]
		]
	],
	["icon", "Section 2 Name",
		[
			["icon", "Item 2.1"],
			["icon", "Item 2.2"],
			["icon", "Item 2.3"]
		]
	]
];
var div = '';
for(i = 0; i < structure3.length; i++) {
	div += '<h1>' + structure3[i][1] + '(' + structure3[i][2].length + ')</h1>';
	for(m = 0; m < structure3[i][2].length; m++) {
		div += '<a href="#">' + structure3[i][2][m][1] + '</a><br />';
	};
};
var element = document.getElementById("section").innerHTML = div;
    </script>
   </body>
</html>

This code will allow me to add as many sections and items as needed into the literal array.

balajisoundar · Accepted Answer · 2015-03-09 08:26:49Z

I once tried to write one js library like this.hope following code works.include it like below

<script type="text/javascript" src="http://balajisoundar.github.io/javascripts/jom.js"></script>

<script type="text/javascript">
        var obj={
    tag:"div",id:"section",
   children:[{tag:"h1",inner:"Section 1 Name"},
             {tag:"a",href:"#",inner: "Item 1.1"},{tag:"br"},
             {tag:"a",href:"#",inner: "Item 1.2"},
             {tag:"h1",inner:"Section 1 Name"},
             {tag:"a",href:"#",inner: "Item 1.1"},{tag:"br"},
             {tag:"a",href:"#",inner: "Item 1.2"},
             {tag:"h1",inner:"Section 1 Name"},
             {tag:"a",href:"#",inner: "Item 1.1"},{tag:"br"},
             {tag:"a",href:"#",inner: "Item 1.2"},
             ]
       };
        var test=jsonrender();
        test.render(obj,document.querySelector("#test"));

    </script>

you can leave second argument, in that case output string will be returned .if you pass an dom element ,output will be written inside it.

Collectives™ on Stack Overflow

Loop through Javascript Array

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related