A guide on how to associate data in ng-repeat with varying indices

Question

A guide on how to associate data in ng-repeat with varying indices

Here is the data from my JSON file:

var jsondata = [{"credit":"a","debit":[{"credit":"a","amount":1},{"credit":"a","amount":2}]},
 {"credit":"b","debit":[{"credit":"b","amount":3},{"credit":"b","amount":4},{"credit":"b","amount":5}]},
 {"credit":"c","debit":[{"credit":"c","amount":6}]}]

This is the HTML code snippet:

<div ng-repeat="x in ?????" >  <input>{{ x.amount}}</input></div>

I am looking to display all the "amount" values from the debit records in a single grid as input fields. Additionally, when I update an amount value in the input field, it should reflect in the original JSON data. Can you help me solve this issue? Thank you in advance.

The expected output in the grid would be:

javascript json angularjs

Answer 1

Answer №1

let app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.data = [{"name":"John","age":30,"city":"New York"},{"name":"Jane","age":25,"city":"Los Angeles"}];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="user in data">
    {{ user.name }} is {{ user.age }} years old and lives in {{ user.city }}
  </div>
</body>

Answer 2

let app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.data = [{"name":"John","age":30,"city":"New York"},{"name":"Jane","age":25,"city":"Los Angeles"}];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="user in data">
    {{ user.name }} is {{ user.age }} years old and lives in {{ user.city }}
  </div>
</body>

Answer 3

Answer №2

You will need to utilize 2 ng-repeats in this scenario.

<div ng-repeat="item in jsonData">
    <div ng-repeat = "element in item.debit">
      <div> {{element.amount}}</div>
    </div>
</div>

Answer 4

You will need to utilize 2 ng-repeats in this scenario.

<div ng-repeat="item in jsonData">
    <div ng-repeat = "element in item.debit">
      <div> {{element.amount}}</div>
    </div>
</div>

A guide on how to associate data in ng-repeat with varying indices

Answer №1

Answer №2

Similar questions

Receiving an error when attempting to inject the Router in a component constructor without using the elvis operator

Error handling: Encountered unexpected issues while parsing templates in Angular 2

Cherrypy/Chrome: Issue with jquery ajax request remaining pending after several successful requests

The Golang json.decoder can successfully parse requests except for those originating from web browsers

I'm attempting to render HTML emails in ReactJS

Can you explain the significance of polyfills in HTML5?

Change numbers into a comma-separated style containing two decimal points using javascript

Is it achievable to refresh ng-repeats in Angular.js using the current scope data?

Issue encountered while trying to run Bower Install: Unable to establish connection with an exit code of #128

Steps to have index.html display when running the build command in a Svelte project:

Best method for simultaneously calling multiple routes in Node.js and Express

Position a component in relation to another component using AngularJS

Start the service without the need to include it as an argument

What is causing jQuery toggleClass to fail in removing a class?

Converting Rails application from AngularJS to ERB

Sending JSON data from an iOS app to a Flask backend

Having difficulty extracting data from FormData() object and encountering difficulty sending it through the frontend

What's preventing my Angular list from appearing?

Enhancing Chat: Updating Chat Messages in Real-Time with Ember.js and Firebase

Vanilla JS method for resetting Bootstrap 5 client-side validation when focused