0

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

zessx
68.9k29 gold badges139 silver badges166 bronze badges
asked Mar 9, 2015 at 5:36
5
  • why cant you try with jQuery? Commented Mar 9, 2015 at 5:39
  • what's the value of icon here? Commented Mar 9, 2015 at 5:40
  • 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. 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. Commented Mar 9, 2015 at 5:54
  • I edited my answer, check now Commented Mar 9, 2015 at 6:21

4 Answers 4

1

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>

answered Mar 9, 2015 at 6:40
Sign up to request clarification or add additional context in comments.

Comments

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>
answered Mar 9, 2015 at 5:52

1 Comment

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.
0

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.

answered Mar 9, 2015 at 6:51

Comments

0

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.

answered Mar 9, 2015 at 6:02

Comments

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.