Iterating over an object using ng-repeat in Angular, where the value is an array

In my data object, I have key-value pairs where the value is an array. Each array contains objects with various properties.

$scope.testObj = {

   "London":[
         {"id":1,"city":"London","country":"GB","name":"Test1"},
         {"id":4,"city":"London","country":"GB","name":"Test2"}
   ],

   "Los Angeles":[
       {"id":8,"city":"LA","country":"US","name":"Test3"}
   ]

}

My goal is to display the names next to the respective cities in the frontend using Angular. I've tried multiple approaches, including using track by $index, but I'm struggling to make it work.

<div ng-repeat="(key, val) in jobsByCity track by $index">
    {{key}}:{{val[$index].name}}
</div>

I've also experimented with nested ng-repeat as shown below:

 <div ng-repeat="(key, val) in testCity">
    {{key}}
    <div ng-repeat="test in val[$index].name">
       {{test}}
     </div>
  </div>

Answer №1

To display the values, you can simply use another ng-repeat:

<div ng-repeat="(key, val) in jobsByCity">
    <div ng-repeat="subValue in val track by $index">
        {{key}}:{{subValue.name}}
    </div>
</div>

Remember to put your Los Angeles property in quotes to ensure it is valid javascript.

Here's an example: this jsfiddle

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

Adjust the size of a div by clicking a button using Javascript

<script type="text/javascript"> var btn = document.getElementById("btn"); var panel = document.getElementById("panel"); var btn2 = document.getElementById("btn2"); function expandPanel() { btn.style.display="none"; panel.style="overflow:hidd ...

Exploring the Form's data-url Attribute

My form tag is set up like this: <form data-id="213" method="post" onsubmit="javascript: startAjax(); return false;"> <input type="submit" value="submit"> </form> When I submit the form, an ajax script runs to validate some information ...

Displaying a message in a modal popup once an existing modal popup has been closed - Angular

Hello, I am new to using Angular and I have a question. How can I show a success message in another popup after sending an email from a modal popup? Here is a snippet of my code: <div id="modalViewImportCode" class="modal fade btm-border" role="dialog" ...

How can I transfer data to a different component in Angular 11 that is not directly related?

Within the home component, there is a line that reads ...<app-root [message]="hii"> which opens the app-root component. The app-root component has an @input and {{message}} in the HTML is functioning properly. However, instead of opening t ...

Is there a way to retrieve the data instead of receiving an undefined result when making an asynchronous call?

subject in user.subjects = subjects below is undefined instead of being an array of subjects. Context: I am working with three database tables - users, subjects, and a relationship table between users and subjects known as users_subjects. The objective i ...

The test does not pass when attempting to use a shorthand operator to ascertain the truthfulness of

I've encountered an interesting issue with my unit test. It seems to work perfectly fine when I directly return true or false, but fails when I try to use a shorthand method to determine the result. Let's say I have a function called isMatched w ...

Deriving variable function parameters as object or tuple type in TypeScript

Searching for a similar type structure: type ArgsType<F extends Function> = ... which translates to ArgsType<(n: number, s: string)=>void> will result in [number, string] or {n: number, s: string} Following one of the provided solu ...

Transferring Data in Vue.js Components through Props

I've encountered an issue while trying to pass a prop from the main Vue instance to a component. While one of the props is being successfully passed, the second one seems to be causing some trouble. Main Instance var app7 = new Vue({ el: &apos ...

Troubleshooting and analyzing the performance of web workers

When running computations like path-finding in web workers, it can take several seconds and optimizing it is crucial. I've noticed that Chrome is roughly 3 times faster for my current code, but I'm not sure where exactly the time is being spent o ...

Utilizing Laravel for Making Ajax Calls to Controller

I am a beginner in using Laravel and I am trying to create an API with Laravel using AJAX calls. However, when I make the AJAX call, the URL appears to show an invalid server path. Below is my code: My Route file : Route::get("a/b","AController@c"); My ...

Is there a way for ResponsiveSlides to fade the pager without causing any disruption to the content below, all

I have been working with the Responsive Slides jQuery plugin and made some custom modifications. Everything is going smoothly, but I am facing an issue with getting the pager and next/prev controls to fade in when hovering over the container. Although I s ...

The HTML form submission button fails to submit the form and instead just refreshes the page

I'm struggling to get the save button working on my Chrome Extension settings page. The .click() event doesn't seem to be activating at all. I've included my code below. Should I use the commented out button instead (see below)? HTML <! ...

Designated location for downloading specified by the user

I've been searching for a while now and I can't seem to find a satisfactory answer. Essentially, I have a website where users can input values and download a specific file based on those values. Everything is functional, but I want to give the u ...

Error message: Unable to load image from local source in Vue application

I am currently working on creating a simple dice roll game in VueJs. However, I encountered an issue with using the dice images as it keeps giving me a 404 error. When I attempted to use require(), it stated that the function was not defined. After some t ...

I am looking to include both the type and maxLength attributes in a MUI TextField

<TextField value={ele.mobile} helperText={ferrors[id]?.mobile} name="mobile" classes={{ root: classes.textField }} InputProps={{ clas ...

What is the most effective method for embedding a Kotlin program into a website?

I have created a combat simulation tool in Kotlin for an online gaming community. Users can input the combat levels of two players, choose the number of duels to simulate, and then initiate the simulation which will provide win percentages and other stats. ...

What is the best way to retrieve the outcome of a node-sqlite3 query beyond the scope of db.get()?

I'm attempting to validate whether the sha256 hash stored in my sqlite database corresponds with the sha256 hash of the password that the user transmitted to my NodeJS server. The Auth() method is meant to deliver either a true or false result. Is the ...

Managing stream pauses and resumes in Node.js using setTimeout()

After some experimentation with Node.js (v4.4.7), I managed to create a simple program to play a sound... const Speaker = require('audio-speaker/stream'); const Generator = require('audio-generator/stream'); const speaker = new Speake ...

Positioning the filters in jQuery Datatables

I'm currently working with jQuery datatables and I'm attempting to align the filter/search box on the same row as the header of the container holding the datatable. Attached is a screenshot for reference: https://i.stack.imgur.com/nzbIl.png He ...

Trigger a click event on a dynamically loaded button

Here's a unique twist to the usual discussions on this topic. I have a dynamically loaded button in my HTML, and I've saved the selector for it. Later on in my code, I need to trigger a click event on this button programmatically. The typical $(& ...