AngularJS: looping through JSON and pass values to ng-model

Question

I have a json object and I need to loop through the json and display the value to the model. the keys of the json is same with the ng-model values. I was able to get the key and values.. I only need to pass it to the inputs..

below is my code.

controller.js

var supplierStorage = {"key1":"value1", "key2":"value2", "key3":"value3"};

for (var i = 0; i <= Object.keys(supplierStorage).length-1; i++) {
    $scope.Object.keys(supplierStorage)[i] = supplierStorage.Object.keys(supplierStorage)[i];  
}

HTML

<input ng-model="key1">

<input ng-model="key2">

<input ng-model="key3">

Thanks.

Hi @Daniel_L.. I am new to angular and still learning javascript.. :) — Kim Carlo
– Kim Carlo, Commented Dec 20, 2016 at 6:03

zainul · Accepted Answer · 2016-12-20 06:17:04Z

1

I don't think you have to assign all the items to scope element using a for loop. Try this:

Angular:

var supplierStorage = {"key1":"value1", "key2":"value2", "key3":"value3"};
$scope.supplierStorage = supplierStorage;

HTML:

<input ng-model="supplierStorage.key1">

<input ng-model="supplierStorage.key2">

<input ng-model="supplierStorage.key3">

edited Dec 20, 2016 at 6:17

answered Dec 20, 2016 at 6:10

zainul

10612 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kim Carlo Over a year ago

I never thought it would be that easy! Thanks mate! :)

Azad · Accepted Answer · 2016-12-20 06:08:18Z

0

try this,

var supplierStorage = {"key1":"value1", "key2":"value2", "key3":"value3"};

for (var p in supplierStorage) {
    if( supplierStorage.hasOwnProperty(p) ) {
      $scope[supplierStorage[p]] = supplierStorage[p];
    } 
  }

answered Dec 20, 2016 at 6:08

Azad

5,2725 gold badges31 silver badges59 bronze badges

Comments

Aravinthan K · Accepted Answer · 2016-12-20 06:13:37Z

0

Simply clone key to scope

var supplierStorage = {"key1":"value1", "key2":"value2", "key3":"value3"};

for(p in supplierStorage) { 
   $scope[p] = supplierStorage[p];
}

answered Dec 20, 2016 at 6:13

Aravinthan K

1,9012 gold badges20 silver badges24 bronze badges

Comments

Sa E Chowdary · Accepted Answer · 2016-12-20 06:16:20Z

you can achieve this with key,value method using ng-repeat like below

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div ng-repeat="(k,v) in supplierStorage">
      <input type="text" ng-model="v"/>
    </div>
  </body>
<script>
  var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
 
  $scope.supplierStorage = {"key1":"value1", "key2":"value2", "key3":"value3"};
});

</script>
</html>

here i bind the values to input if you want to bind keys replace v with k

Nitheesh · Accepted Answer · 2016-12-20 06:17:08Z

Try this. There is no need of loops.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>

    <script>
        var app = angular.module("MyTestApp", []);
        app.controller("myCtrl", function ($scope) {
            var supplierStorage = {
                "key1": "value1",
                "key2": "value2",
                "key3": "value3"
            };

            $scope.DataArray = supplierStorage;
        });
    </script>

    <div ng-app="MyTestApp" ng-controller="myCtrl">
            <input ng-model="DataArray.key1"/>
            <input ng-model="DataArray.key2"/>
            <input ng-model="DataArray.key3"/>
    </div>


</body>

</html>

ishwar · Accepted Answer · 2016-12-20 06:20:32Z

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
    </head>
    <body>
    <script src="https://rawgit.com/angular/bower-angular/master/angular.min.js"></script>
     <div ng-app="myApp" ng-controller="myCtrl">
        <div ng-repeat="(key, value) in supplierStorage">
         {{key}} : <input type="text" ng-model="data[key]"/> {{data[key]}}
        </div>
    </div>
    </body>

    <script type="text/javascript">
         var app = angular.module('myApp', []);
         app.controller('myCtrl', function($scope) {
          $scope.supplierStorage = {"key1":"value1", "key2":"value2",               "key3":"value3"};
});


    </script>
    </html>

Collectives™ on Stack Overflow

AngularJS: looping through JSON and pass values to ng-model

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related