How can you utilize ng-repeat to iterate through a JSON file in AngularJS?

My JSON file is named brands.json:

{
  "brands": {
    "Honda": [
      "Accord",
      "Civic"
    ],
    "Porsche": [
      "Cayenne",
      "Cayman"
    ]
  }
}

I am attempting to loop through this list, display the brand names (e.g. Honda and Porsche), and render them using HTML lists.

<li ng-repeat="brand in items">{{brand}}</li>

Javascript:

$scope.items= [];
$http.get('brands.json').then(function(response) {
    $scope.items =response.data.brands;
});

The code functions correctly but it currently shows the arrays within the brand names. For example, instead of displaying Honda, it displays ["Accord", "Civic"]. I want it to show only the brand names.

<li>Honda</li>
<li>Porsche</li>

Answer №1

Give it a shot:

<li ng-repeat="(index, item) in elements">{{index}}</li>

Citing the documentation:

(index, item) in directive – where index and item are flexible names chosen by the user, and directive is the scope expression providing the array to iterate over.

For instance: (city, population) in {'Los Angeles':4000000, 'New York':8000000}.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues with JavaScript's getTime() function I am facing problems with

Currently, I'm developing a simple HTML quiz consisting of 10 questions, each on a separate HTML page. Upon the user clicking the START button on the index.html page, the following script is triggered: var s = new Date(); sessionStorage.start_test = ...

Utilizing Ajax to dynamically update the content of a div element

As a newcomer to Ajax, I am trying to use xmlhttprequest to dynamically change the content of a div by fetching HTML from different URLs. However, my code doesn't seem to be working as expected. Can someone help me identify what I might be doing wrong ...

Issue with the functionality of socket.io callback functions

Previously, I used to utilize the socket.io emit callback in the following manner: On the client side: mysocket.emit('helloworld', 'helloworld', function(param){ console.log(param); }); On the server side: var server = r ...

Having trouble updating the text in a div tag located above a specific button?

Hey there! I am using a RoundedButton component with a div tag for setting dynamic text, followed by a button. In my App.js, I have utilized this component thrice. However, when a user clicks on any button, the "User selected" text should display above th ...

This function in JavaScript only returns the file size of the initial FileUpload, ignoring any subsequent uploads

I have created file input boxes using a JavaScript function. If the user wants to attach more files, the function is: <script type="text/javascript"> var upload_number = 1; var attachmentlimit = 5; function addFileInput() { var d = document.cre ...

Using jQuery to pass dynamic values to a plugin function

I'm currently utilizing the JSONTable plugin and attempting to dynamically pass values to the 'head' and 'json' parameters by extracting them from an array object. For instance, I aim to load a new json file, convert it to a JavaSc ...

Unable to retrieve data from Meteor find query

I have a collection created in collections.js portfolioItems = new Mongo.Collection('portfolioitems'); This collection is then subscribed to in subscriptions.js Meteor.subscribe('portfolioitems'); And published in publications.js M ...

Using Grails assets within AngularJS templates

Currently, I am developing a basic application using Grails 2.4.4 in combination with AngularJS 1.3.15. In order to integrate templates with Grails, I have incorporated the AngularJS Template Asset-Pipeline Plugin 2.0.7. Initially, my application did not ...

Dynamic Mesh modification and Raycasting in Three.js

When I clone a mesh from another mesh and then translate and rotate it, I encounter an issue with ray-casting. The point seems to be intersecting with the original position before translation and rotation. Here is a snippet of the code: const raycaster = ...

Ways to modify the values of a Bootstrap Dropdown using a unique identifier

Here is an example of a typical Bootstrap Dropdown: <div class="btn-group"> <button type="button" class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Default option<span class ...

When attempting to trigger an error, the unit test will fail to pass

I am relatively new to Mocha, Chai, and Unit Testing. I'm currently attempting to create a basic test to verify the presence of Authorization headers in the request that passes through my middleware function. Despite trying various approaches such as ...

How can I showcase a chosen name in a <p> tag using a Select dropdown, and then pass the selected ID to a controller in AngularJS

I am working with a select input in my HTML that is populated using ng-options. My goal is to display the selected NAME below, while sending the selected ID back to the controller. I am able to access the required id from ng-model="user.category". How ca ...

The Power of Pjax and jQuery

Currently, I am utilizing pjax to load specific HTML content after a link is clicked. In order to accomplish this, I need to send some custom data to the URL specified on the link: $(document).on('ready pjax:beforeSend', function(event, options) ...

Straightforward markdown editor

I've been working on integrating a markdown editor into my application and decided to try using simplemde-markdown-editor from here. It's functioning well, but it has altered the cursor pointer for my textarea field, as shown in this picture: ht ...

The challenge of executing JavaScript in the correct order

I am facing an issue where 5 always prints before 4 in my code snippet below. I expected the callback to postUsers within a return statement from matchAgainstAD to wait for the completion of the for loop and ad lookup before returning. What is the simple ...

What is the best way to extract a specific value from my JSON requests?

I need assistance in extracting a specific variable from the response after making a request. How can I access the data within my response? import requests import json url = "XXXXXX" payload = json.dumps({ "userName": "XXXXXX&q ...

Using JQuery to assign numerous values to a single element within a table

Flask is the framework I am currently using. Within my HTML file, I pass four distinct lists and iterate through them to display their values within a table. {% for (s_pid, s_name, s_cpu_percent, s_memory_percent) in zip(pid, name, cpu_percent, memory_per ...

What is the best way to ensure my arrow text remains properly positioned when using fullpage.js?

Seeking guidance from the web development community. I am currently working on a client's website that utilizes fullpage.js and encountering a persistent issue. On slide1 of the website, I am struggling to display the correct text next to the arrows. ...

Ways to determine whether a DOM textnode is a hyperlink

Is there a more foolproof method for determining if a DOM textnode represents a hyperlink? The code snippet below currently only checks if the node is directly enclosed in an anchor tag, which may not be sufficient if the <a> element is higher up i ...

Tips for confirming that one of three checkboxes has been selected in AngularJS

Here is the code snippet for checkboxes: <input name="chkbx1" type="checkbox" ng-model="LoanReferData.Prop1" ng-class="Submitted?'ng-dirty':''" required>Prop 1</input> <input name="chkbx2" type="checkbox" ng ...