As someone who is brand new to coding, I am embarking on the journey of building a basic website using AngularJS. However, I've hit a roadblock when it comes to looping through an object array in a controller and displaying each item in a directive template. My aim is to showcase each string in the array as a separate list item within the template.
$scope.items = [
{
list: ["1", "2", "3"],
name: "whatever"
},
{
list: ["4", "5", "6", "7", "8"],
name: "whatever2"
}]
In my directive template, I have attempted the following:
<h1>{{ directive.name }}</h1>
<ul id= "items"></ul>
<script>
for (var i = 0; i < directive.list[].length; i++) {
document.getElementById("items").innerHTML =
"<li>{{" + directive.list[i] + "}}</li>";
};
</script>
Although the 'name' object displays correctly in index.html using the template, the 'list' object fails to output the array items. Despite my best efforts and troubleshooting, I can't seem to crack this issue. Any guidance would be greatly appreciated. This is all very new to me, and I'm still getting familiar with the terminology and concepts. Thank you in advance for any help!