Accessing properties in JSON data with AngularJS

Question

Accessing properties in JSON data with AngularJS

I am experiencing issues with accessing a JSON object returned from an $http call in my AngularJS app. I have provided the code snippet below, but it seems that nothing is being rendered on the HTML. Can anyone please assist me in identifying what I might be doing wrong and guide me on how to correctly access the properties of the JSON object? Your help will be highly appreciated.

Just to note, I confirmed that the data is being sent to the view by utilizing console.log to print the customers list JSON object to the console.

Thank you.

{"Result":
   [{"customer":
        {"CustomerName":"Michael",
         "CustomerId":"212331",
         "Active":true
        },
        "salesid":19,
        "sales_name":"John West",
        "rank":["Sales Manager"]

...
...

In customers-list.html:

    <ul>
        <li ng-repeat="customer in myCustomersList">
            <div>
                <div>
                   <p>Customer Name: {{customer.CustomerName}}</p>
                </div>
            </div>
        </li>
    </ul>

javascript json angularjs

Answer 1

Answer №1

If the data returned from your $http request, as seen in your initial post, is stored in a variable named data, and you have assigned it to $scope.myCustomersList, then your HTML structure should look like this:

<ul>
    <li ng-repeat="customer in myCustomersList.Result">
        <div>
            <div>
               <p>Customer Name: {{ customer.customer.CustomerName }}</p>
               <p>Sales Name: {{ customer.sales_name }}</p>
               Rank(s): 
               <ul>
                   <li ng-repeat="rank in customer.rank">{{ rank }}</li>
               </ul>
            </div>
        </div>
    </li>
</ul>

Answer 2

If the data returned from your $http request, as seen in your initial post, is stored in a variable named data, and you have assigned it to $scope.myCustomersList, then your HTML structure should look like this:

<ul>
    <li ng-repeat="customer in myCustomersList.Result">
        <div>
            <div>
               <p>Customer Name: {{ customer.customer.CustomerName }}</p>
               <p>Sales Name: {{ customer.sales_name }}</p>
               Rank(s): 
               <ul>
                   <li ng-repeat="rank in customer.rank">{{ rank }}</li>
               </ul>
            </div>
        </div>
    </li>
</ul>

Accessing properties in JSON data with AngularJS

Answer №1

Similar questions

The content in the div tag isn't showing up properly because of Ajax

Ignoring @ExceptionHandler in Spring Security for Ajax requests

Accessing HTML elements that are created dynamically in AngularJS

React: Encountered an expression in JSX where an assignment or function call was expected

Specify the versions of packages in your package.json file

Using jQuery to alter hover color using a dynamic color picker

Instructions on utilizing slideDown() paired with appendTo()

Ways to customize the default countdown timer

How can I stop popup labels from appearing in MapBox GL JS when I don't want them to be visible?

The JavaScript program for the shopping list is experiencing issues with the formatting of list items

"Converting circular structure into JSON" - Inserting BigQuery Data using Cloud Function in Node.js

Here's a method to extract dates from today to the next 15 days and exclude weekends -Saturday and Sunday

Receive the button click event outside of the canvas

Guide to cycling through Promise results and populating a form

Storing user and message data with LocalStorage technology

How can an array of file paths be transformed into a tree structure?

Arrays in Javascript (correlating)

Transform an object into an array using JavaScript with the help of Lodash, Azure Functions, and Azure Logic Apps

Using the class for jQuery validation as opposed to the name attribute

Issue with populating dropdown menu inside jquery modal dialog box