Looping through arrays using ng-repeat

{
"employees" : [ 
    {
        "name" : "XXX",
        "id" : "1",
        "Salary" : [ 
            {
                "Month" : "XXXX",
                "Amount" : "XXXX",
            }, 
            {
                "Month" : "XXXX",
                "Amount" : "XXXX",
            }, 
            {
                "Month" : "XXXX",
                "Amount" : "XXXX",
            }
        ]
    }, 
    {
        "name" : "YYY",
        "id" : "2",
        "Salary" : [ 
            {
                "Month" : "YYYY",
                "Amount" : "YYYY",
            }, 
            {
                "Month" : "YYYY",
                "Amount" : "YYYY",
            }, 
            {
                "Month" : "YYYY",
                "Amount" : "YYYY",
            }
        ]
    }
],
}

I encountered an interesting challenge while trying to display this data from the object above in my HTML using AngularJS. Here's what I came up with:

 <div ng-repeat="i in vm.employees">
    {{i.id}}
    {{i.name}}
    <ul>
        <li ng-repeat="salary in i.Salary">
            {{salary.Month}}: {{salary.Amount}}
        </li>
    </ul>
</div>

With this code snippet, I was able to successfully display the employees' ids, names, and their corresponding salaries. Feel free to use and modify this code as needed for your project!

Answer №1

To properly display nested JSON data in your AngularJS application, you will need to utilize nested ng-repeat directives.

<div ng-repeat="employee in vm.employees">
            {{employee.id}}
            {{employee.name}}
    <div ng-repeat="salary in employee.Salary">
         {{salary.Month}}
         {{salary.Amount}}
    </div>
</div>

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

The Angular performance may be impacted by the constant recalculation of ngStyle when clicking on various input fields

I am facing a frustrating performance issue. Within my component, I have implemented ngStyle and I would rather not rewrite it. However, every time I interact with random input fields on the same page (even from another component), the ngStyle recalculate ...

Using AngularJS and ServiceStack webservice, perform the "get('url')" operation

I'm completely new to AngularJS and I'm attempting to retrieve some JSON items from a webservice I quickly set up using ServiceStack. When I enter the URL in the browser, I can see the JSON object without any issues. However, for some reason Angu ...

Setting up a connection to MongoDB on a local network using express and mongoose

As I set up a server with express and mongoose, my goal is to make it accessible on other devices within my local network. To achieve this, I configured the bind_ip variable to 0.0.0.0 in the Mongodb configuration file. const connection = mongoose .co ...

Looking for assistance with ReactJs code related to implementing a filter button

I've been working on creating a filter button using ReactJs, but I can't seem to get it to work properly. I've spent a lot of time troubleshooting, but the issue persists. You can view my codePen here: https://codepen.io/tinproht123/pen/gOxe ...

What are the Functions of Ctrl-K on Stack Overflow?

I'm intrigued by how to incorporate the Ctrl+K (code sample) feature for code. For example: public static void main(String args[]){ System.out.println.out("welcome"); } Is there a way to nicely format this? Do we need any specific package to ...

I am looking to trigger the change event from within the click event in Angular

My objective involves detecting when the cancel button is clicked while a file is being uploaded. I am trying to accomplish this by triggering the click event, then monitoring for the change event. If the change event occurs, the document will be uploaded. ...

Stopping a build programmatically in Next.js involves implementing specific steps that aim to halt

Is there a method to programmatically halt the execution of npm run build in Next.js when a specific Error occurs within the getStaticProps function? Simply throwing an Error does not seem to stop the build process. ...

I am encountering a "TypeError: topics.forEach is not a function" error when attempting to retrieve metadata for topics using my kafkajs client in Node.js/express.js. Can anyone help me understand why

I am attempting to retrieve the metadata of my Kafka brokers' topics using the kafkajs admin client within my Node.js + express.js server. Here is the content of my index.js file, serving as the main entrypoint for npm: 'use strict'; cons ...

Limiting the number of checkboxes selected in a Checkbox Group based on

I am working on a checkboxGroupInput that has 4 options (denoted as A, B, C, D). My goal is to restrict the selection to only 2 choices. The user should be able to pick a 3rd option. In this scenario, only the newly selected (3rd) and previously selec ...

Updating a data table using POST values in ASP.NET: A step-by-step guide

I am working on updating values in my database and want to ensure that my script is functioning correctly. In order to check, I created a POST method to send the values and confirm they are being received. https://i.sstatic.net/h0IH5.gif Now, my question ...

Once the print dialog is canceled or saved, the current window remains open

Whenever I try to print the data, a new window opens displaying all the respective data of the HTML page. The print dialog then quickly appears, but if I cancel or close the dialog, the current window does not close. Can someone please provide suggestions ...

<dt> and <dd> have not been added after the previous element

I can't seem to figure out why the dt and dd elements are not being added to the dl I created. Here's my initial attempt: // Dictionary list var words = [ { term: "Procrastination", definition: "Pathological tendency to s ...

Can you explain the contrast between uploading files with FileReader versus FormData?

When it comes to uploading files using Ajax (XHR2), there are two different approaches available. The first method involves reading the file content as an array buffer or a binary string and then streaming it using the XHR send method, like demonstrated he ...

What is the best method for implementing pagination in Larvael with React using Inertia?

Is there a way to paginate in react using inertia with laravel? When pulling paginated data, I use the following code: $contacts = Contact::orderBy('name', 'asc')->paginate(10); return Inertia::render('Contacts/index', [ ...

javascript onload button is selected

I am looking to create a button on page load for my login page in Chrome. I want the login button to be preselected when the page loads, and when I press Enter, the onclick function of the button should be triggered. Any advice on how to achieve this? Th ...

Issue with JQuery's parentsUntil method when using an element as a variable not producing the desired results

I'm having trouble with a specific coding issue that can be best illustrated through examples: For example, this code snippet works as expected: $(startContainer).parents().each(function(index, parentNode) { if (parentNode.isSameNode(commonConta ...

Would you like to learn how to display the value of a different component in this specific Angular 2 code and beyond

Hey there, I need your expertise to review this code and help me locate the issue causing variable "itemCount" to not display any value in about.component.html while everything works fine in home.component.html. I am attempting to only show "itemCount" in ...

React is re-rendering the identical div elements once more - Delving into the concept of

After reading about reconciliation in the React documentation, an interesting scenario crossed my mind. In my examples, I have code that involves using a button element to toggle a boolean value on click event. Based on this value, the code utilizes a ter ...

The Angular 2 application functions perfectly when running locally, but encounters issues when running on an ec2 instance

When trying to upload an Angular 2 application to an AWS EC2 t2.small instance, it is not working as expected, even though it runs successfully in a local server. Node version: v7.0.0 NPM version: 3.10.8 There has been an EXCEPTION: Uncaught (in prom ...

jQuery fails to make a POST request when the content type is set to application/json

I am utilizing jQuery version 1.10.1. My goal is to execute a POST request with the content type set to application/json. The code I have implemented is as follows: $.ajax({ type: "post", url: urlBase + "user/search", contentTy ...