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

Deciphering the intricacies of the http request

Passing the JSON object located at the selected index within a listview to the next activity in my android application

Caching a large JSON file on both the server and client side

JavaScript special character encoding techniques

Transforming a list into Json format within Robot Framework

Is it possible to locate/create a JSON keyname in a jQuery $.post function?

Exploring the enhanced capabilities of FeathersJS by integrating express-babelify-middleware

Using an if statement following the iteration of a JSON object in a React Native application

"Make sure the last if statement is always the one being executed

The issue of generating PDFs in PHP/Ajax encountering a timeout

Rephrase the ajax call and the data retrieved

Using JSONP in AngularJS can be a powerful tool for

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

How to verify if an object is empty in an AngularJS expression

How to effectively inject moment.js dependency into AngularJS?

Combining strings within a string after a specific word with nested Concatenation

The act of receiving becomes ineffective when it was intended to be functional - Nextjs/JavaScript

Prevent anchor jumping caused by popstate event in Safari

Comma Filtering in Ag-Grid

Complete my search input by utilizing ajax