Iterating over a JSON object with an embedded index in Angular using ng-repeat

Here is the structure of a JSON object:


{
    "0": {
        "Order_Id": "100000001",
        "prodct_Status": "Pending",
        "Price": "8.0000",
        "date_created": "Jun 4, 2014 7:55:42 AM",
        "Shipping_Address": "vbccv",
        "Region": "Arizona",
        "Country": "US"
    },
    "1": {
        "Order_Id": "100000002",
        "prodct_Status": "Pending",
        "Price": "38.4600",
        "date_created": "Jun 7, 2014 6:37:48 AM",
        "Shipping_Address": "vbccv",
        "Region": "Arizona",
        "Country": "US"
    },
    "2": {
        "Order_Id": "100000003",
        "prodct_Status": "Pending",
        "Price": "44.9200",
        "date_created": "Jun 10, 2014 4:52:46 AM",
        "Shipping_Address": "vbccv",
        "Region": "Arizona",
        "Country": "US"
    }
}

I am looking to use ng-repeat with this JSON data. The indices 0 and 1 need to be retained.

javascriptangularjs

Answer №1

To display a list using ng-repeat, you can follow the standard syntax:

<body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <div ng-repeat="item in data">
      {{item.Order_Id}}
      {{item.Region}}
    </div>
  </body>

Here is the controller code:

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  $scope.data = {
    "0": {
        "Order_Id": "100000001",
        "prodct_Status": "Pending",
        "Price": "8.0000",
        "date_created": "Jun 4, 2014 7:55:42 AM",
        "Shipping_Address": "vbccv",
        "Region": "Arizona",
        "Country": "US"
    },
    "1": {
        "Order_Id": "100000002",
        "prodct_Status": "Pending",
        "Price": "38.4600",
        "date_created": "Jun 7, 2014 6:37:48 AM",
        "Shipping_Address": "vbccv",
        "Region": "Arizona",
        "Country": "US"
    },
    "2": {
        "Order_Id": "100000003",
        "prodct_Status": "Pending",
        "Price": "44.9200",
        "date_created": "Jun 10, 2014 4:52:46 AM",
        "Shipping_Address": "vbccv",
        "Region": "Arizona",
        "Country": "US"
    }
   };

});

You can view the example here.

Answer №2

When utilizing ng-repeat, keep in mind that it can loop through objects as well:

<div ng-repeat="(key, value) in {'0':{'Order_Id':'1'},'1':{ 'Order_Id': '2'}}">
  <span>{{ value.Order_Id }}</span>
</div>

If the index is represented by a string, you can simply disregard it in your implementation. For more insights, refer to this answer.

Answer №3

Give this a try

var jsonData = { /* add your JSON data here */ };

<ul>
     <li ng-repeat="(key, value) in jsonData">
      {{ key }} {{ value.Price }}
     </li>
</ul>

Check out this link for a live example

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

Tips for capturing form data values from an AJAX POST request in a Laravel controller

I am facing an issue with sending a set of data, including an image file, through ajax using FormData. However, when I try to access this data in my Laravel controller, it keeps showing as a blank array. Below is the snippet of my ajax code: var fd = new ...

phpangularjsajaxlaravelcontroller

Calculating the total sum in Vuejs when an event is triggered

I am faced with a situation where the price of a product is added to an existing total when a user increases the quantity. However, the problem lies in the fact that even if the user decreases the quantity, the price continues to increase. Solution html ...

javascriptvue.jsvuejs2

Using React to dynamically assign a backgroundImage based on a JSON response

I am having an issue with retrieving data from my Wordpress API and displaying it in my react app. Specifically, I am struggling to set the post's featured image as a background-image for an element. Here is an example of the JSON response: { "id" ...

javascriptreactjs

"Is it possible to keep an eye on two different events and take action once they both

I have a menu with different submenus for each list item, all utilizing the same background tag. Currently, when one submenu is open and I hover over another list item, the previous submenus hide and the new one opens. What I want is for the content to cha ...

javascriptjqueryhtmlcss

How to leverage tsconfig paths in Angular libraries?

While developing an Angular library, I made configurations in the tsconfig.lib.json file by adding the following setup for paths: "compilerOptions": { "outDir": "../../out-tsc/lib", "target": "es2015", "declaration": true, "inlineSources ...

javascriptangulartypescript

Exploring the dynamic duo of MongoDB and GridFS

We currently manage a large-scale project that accommodates thousands of users daily. Our database system is MySQL, but we are considering transitioning to MongoDB along with GridFS. Is it feasible to utilize MongoDB and GridFS for projects on this scale? ...

javascriptphpmongodbgridfsnosql

Using HTML to design interactive buttons that can send API requests and display their current status

Seeking assistance with creating buttons to control a remote light's ON and OFF states while reflecting their status as well. The specific http API calls for the light are necessary to toggle its state. Turn On = http://192.168.102.22:3480/data_requ ...

javascripthtmllua

Tips on positioning a button "above" the carousel-control-next icon

I have a carousel and I added a button to stop the spinning. However, when I try to click on the button, it seems like the "carousel-control-next" tag is being clicked instead. How can I solve this issue? ** Interestingly, when I remove the "carousel-cont ...

javascripthtmljquerytwitter-bootstrapbootstrap-4

Scrolling to a specific position on a page when a Vue 3 component appears is a must-do for

When I click a button, my basic form component appears without using the router. I would like the scroll position of the form to automatically move down slightly (for example, on the y-axis at 40) once it is displayed. However, I am unsure of how to achi ...

javascripthtmlvue.jsvuejs3

Exploring the Methods to Monitor Variables in Framework7 Store

Currently, I am in the process of developing my app and have opted to utilize the new built-in store system instead of relying on Vuex. I have a variable that undergoes frequent changes and previously used the following code when working with Vuex: store.w ...

javascriptvue.jsstorehtml-framework-7

What could be causing the constant undefined response when using ajax to post to php?

I have been using a mouseover event on a span element to trigger an ajax post call to a php page. However, I keep getting undefined values - first for responseText when using a simple echo to get the response, and now with responseXML. Can someone please h ...

javascriptphpajax

Troubles arising while using ng serve in Angular 2

I'm currently facing an issue during the installation process of an existing Angular application. When trying to run the application using the ng serve command, I encounter the following error message: The "@angular/compiler-cli" package was not prope ...

javascriptangularnpmnpm-install

Is it possible to update the page title with JQuery or JavaScript?

Is it possible to modify the page title using a tag inside the body of the document with jQuery or JavaScript? ...

javascriptjqueryhtmlcssdom

Saving resources with a promise in Angular

I am facing a challenge while trying to handle a promise from the angular $resource save function. According to the documentation, I should be able to access the raw $http promise by using the $promise property on the returned object. Here is an example: ...

javascriptangularjsangular-promiseangularjs-ng-resource

When the page is loaded, ensure a condition is met before displaying a modal pop-up using AngularJS

Just starting out with AngularJS and looking to implement a modal pop up? I've tried using the modal on button click from the Angular dialog demo tutorial. Now, I want to show the pop up based on a condition when the page loads. The idea of automatic ...

javascriptjqueryhtmlangularjsmodal-dialog

The app.html for the skygear/react-chat-demo is malfunctioning

I followed the instructions provided in the Skygear manual at https://docs.skygear.io/guides/advanced/server/ The skygear-server-darwin-amd64 started successfully. Then, I attempted to run the react-chat-demo project from https://github.com/skygear-de ...

javascriptnode.jsskygear

Learn how to implement Basic Authentication in your Express application using the express-basic-auth package. You can easily trigger login and logout

When it comes to logging out a user who has logged in using basic Auth, I am exploring different options by consulting various sources like: link1 link2 In my application, I have implemented express-basic-auth to secure certain routes. Here is an example ...

javascriptnode.jsexpressauthenticationbasic-authentication

An issue of an infinite loop arises when utilizing the updated() lifecycle hook in VueJS

I am working on a VueJS application where I need to fetch a list of articles in one of my components. The logic is such that if the user is logged in, a specific request is made, and if not, another request is executed. Below is the snippet of code: <s ...

javascriptvue.jshook

Learn how to send information to a form and receive a response when a key is pressed, either up or down, by

Can you help with fetching data and passing it into a form to respond to customer names on keyup or keydown using JSON and PHP? <?php $conn = new mysqli("localhost", 'root', "", "laravel"); $query = mysqli_query($conn,"select * from customers ...

javascriptphpjsonajax

Sharing Global Variables in Node.js: What's the Best Way to Pass Them into Required Files?

Recently, I decided to organize my gulpfile.js by splitting it into multiple files within a /gulp folder. However, I encountered an issue when trying to pass a variable debug (boolean) into these files to control the behavior of the gulp command being incl ...

javascriptnode.jsnpmrequiregulp