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

Transforming a PHP cURL call to node.js

Currently, I am in the process of developing a fabric mod, but I am encountering some difficulties with the ClientOnInitialize

Creating Unique Names for DataMembers in WCF Generics

Ajax response values overlap

Create a parent dropdown class that contains two separate bootstrap dropdowns nested within it

An 'Syntax Error' message appears in Internet Explorer when JSONP does not receive a response

What is the best way to navigate back to the top of the page once a link has been clicked?

How to dynamically populate a select option with data from a database in CodeIgniter 3 and automatically display the result in a text

Angular: How come my filter only functions properly when implemented in a less efficient manner?

Navigate through an array of objects to retrieve particular key/value pairs

Retrieve information from XML using jQuery

Retrieving the data from an Angular website using a curl command

Ways to bypass browser pop-up blockers when using the window.open function

Dragging items in the horizontal list of Knockout-Sortable causes them to be pushed vertically

Reset input fields while retaining placeholder text

The CORS policy is preventing the AJAX request from functioning properly on localhost

Exploring the utilization of org.springframework.kafka.support.serializer.JsonTypeResolver: a closer look at 2

Check to see if my Node.js server is running in development or production mode

Using jQuery to add a class to an input option if its value exists in an array

Discover the method to adjust the position of elements, such as images, using radio buttons