Discovering the method for accessing nested JSON data through ng-repeat in AngularJS

I'm attempting to access the items._id value within ng-view using ng-repeat. I am able to retrieve all data, but I am interested in specific data only.

Data.json

 [ { _id        : "td6v9db4514cc4ewew4334",
     firstName  : 'ayaz',
     lastName   : 'memon',
     items      : '[{"_id":"item2","_name":"My Item #4"},
                    {"_id":"item3","_name":"My Item #4"}]',
     totalItems :  3,
     totalPrice :  2999.97 } ]

Controller

app.controller('myCtrl', function($scope, $http) {
  $http.get("data.json").then((response) => {
    console.log(response.data)

    $scope.userInfo = response.data
  })
})

ng view

<body ng-app="myApp">

<div ng-controller="myCtrl">
<ul ng-repeat="x in userInfo">
  <li >{{x}}</li>

</ul>

Answer №1

When working with nested JSON objects like items in userInfo, you can utilize ng-repeat as shown below:

<body ng-app="myApp">
<div ng-controller="myCtrl">
<ul>
  <li ng-repeat="x in userInfo.items">{{x._id}}</li>
</ul>

Please note: It is recommended to use ng-repeat within <li></li> instead of <ul></ul>

Answer №2

To better structure your code, consider implementing a nested ng-repeat in the following manner:

<ul ng-repeat="user in userInformation">
  <li ng-repeat="item in user.items">{{item._id}} : {{item._name}}</li>
</ul>

Ensure that your HTTP request returns valid data, as the JSON provided seems to be incorrect due to missing double quotes around keys. This implementation assumes there will be multiple objects returned in the response.

Answer №3

Give this a try:


    [{
        "_id": "td6v9db4514cc4ewew4334",
        "firstName": "ayaz",
        "lastName": "memon",
        "items": [{
                "_id": "item2",
                "_name": "My Item #4"
            },
            {
                "_id": "item3",
                "_name": "My Item #4"
            }
        ],
        "totalItems": 3,
        "totalPrice": 2999.97
    }]

You can now retrieve the repeated "_id" in the items by using ng-repeat="item in userInfo.items" and with {{item._id}}.

If there are any errors, feel free to point them out as I am still learning. Thank you.

Answer №4

Attempting to fetch a string as an object, I accidentally used object data instead of a string and surprisingly obtained the desired outcome.

Answer №5

Here is a solution that worked well for me:

<ul>
  <li ng-repeat="person in personInfo">
     <ul>
       {{person._id}}
       <li ng-repeat="thing in person.things">
         {{thing._id}}
       </li>
     </ul>
  </li>
</ul>

Check out this Plunker Example: http://plnkr.co/edit/abCDe3FgHjkLmnOPQRSt?p=preview

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

Can you explain the purpose of this variable "guess = require('myModule1')('myModule2');" ?

While examining a code snippet, I stumbled upon this line and am unsure which instance it is referring to. var guess = require('myModule1')('myMmodule2') ...

Playing with vue component dependencies

During my attempt to run a unit test, I encountered an error when making an axios call. To handle this error, I successfully mocked the call but faced an issue when trying to utilize an external library dependency (specifically, vue-toasted) to display an ...

How to handle HTTP errors with Airbrake in AngularJS

I have set up airbrake to report errors, but it does not seem to be capturing HTTP errors. I am attempting to adjust the configuration to include these errors. Below is the code snippet for my factory: import AirbrakeClient from 'airbrake-js'; ...

How to Send JSON using jQuery's Ajax PUT Method?

Attempting to send JSON formatted data to a server using Ajax with jQuery but encountering an issue. Here is the code snippet: $.ajax({ type: "PUT", url: myURL, contentType: "application/json", data: {"data": "mydata"} }); Despite the cod ...

PHP: variables malfunctioning post implementation of "if" statement

Recently, I encountered a strange issue while working on a database processor. After processing the login information, the variables containing the data seemed to disappear and any subsequent actions within the "if" statement, which verified the login info ...

Utilizing HTML templates efficiently without the need for a view engine

For a new application, we are implementing multiple servers for handling different functions - one server for delivering HTML files, another as a proxy to handle HTTPS requests, and a Java backend with a database. The view server should be simple, with an ...

The error message "npm ERR! enoent" indicates that npm is unable to locate a specific file

How do I troubleshoot this issue? After attempting the master version, I encountered a similar error. My operating system is OSX Yosemite: bash-3.2$ yo meanjs You're utilizing the official MEAN.JS generator. ? Which version of mean.js would you like ...

Merge two nested JSON arrays by overriding the values of JSON A with those of JSON B

There are two JSON arrays that need to be compared. If the "id" property in Json A matches the "id" property in Json B, then override the values of the properties in Json A with the values of the properties in Json B. Here is the JSON A Array: { "com ...

Combine bar and stacked bar charts on a single graph with morris.js

Can a combination of a stacked bar chart and a regular bar chart be created in morris.js? I have successfully generated a stacked bar chart using the following code: Morris.Bar({ element: 'bar-example', data: [ {x: '2011 Q1', ...

End the HTML page once the Flash (SWF) animation comes to a close

I have successfully exported my flash file to an HTML page. How can I make the page close automatically once the flash animation is finished? While I can use actionscript to stop the animation, I need the entire page to shut down on its own. I attempted u ...

Is there a specific method or function that can effectively translate special characters such as into their corresponding representations?

When a user provides input for my script using shell arguments, it would look something like this: Kek kek\nkek\tkek\x43 After receiving the input, Javascript interprets my parameter in a specific way: var parameter="Kek kek\&bs ...

AngularJS - Array binding issue not updating in directive

I am currently developing a directive that has the ability to display a series of controls. Each individual control is implemented as a directive named fsFilter. In the controller managing the parent element, I establish a binding between the filters arra ...

Executing unit tests involves invoking a controller function using Karma and Jasmine

Here is the code for my angular controller: angular.module('authoring-controllers', []). controller('NavCtrl', function($scope, $location, BasketNavigationService) { $scope.test= function() { $scope.testVar = ...

The functionality of changing the category in the second carousel slider on click using JavaScript appears to

Creating a bootstrap carousel slider that dynamically changes based on the selected category. For example, clicking on the hammer category will display only hammer images, while selecting the compass category will show compass images. Everything worked sm ...

"Encountering a halt in my Node.js Application as it waits endlessly

I'm currently following a tutorial on creating a collaborative canvas drawing application using Node.js and Socket.io. I've included the source file below which is used to create the server. However, when I try to open it in my browser, it gets s ...

Using data across multiple instances in node.js EJS partials

I need some advice regarding my nodejs project. I have created a sidebar partial that requires user data to be displayed on it. This sidebar is utilized across multiple pages in the project. However, currently, I have to include the user data in every func ...

Exploring the integration of ng-csv with Firebase data in an AngularJS project

Seeking assistance with ng-csv functionality to enable users to download a .csv file by clicking a button. The data is stored in Firebase, and I have a function that retrieves the necessary information as an array. However, it seems that upon button click, ...

The JSON request sent to Alexa does not align with the specified Intent Schema

I am currently running an application server using Express with the following versions: "body-parser": 1.14.2", "express": "^4.13.3", "parse-http-header": "^1.0.0", "x509": "^0.2.3") Node v5.4.1 NPM v3.3.12 After successfully testing the SSL connection b ...

What is the clarification on AngularJs' ng-options?

In my demo, I have a small setup. Essentially, it consists of a select element with the following data: address: { select: { code: "0", name: "Select proof of address" }, letter: { ...

Guide to showing several charts simultaneously within a single controller utilizing Chart.js with Angular JS

I am looking to incorporate two distinct charts with different sets of data using chart.js within the same controller. However, I am currently facing difficulties as I am unsure of the proper procedure. Could someone kindly provide guidance on how to achie ...