Keep ng-model in array and set values using loop AngularJs

Question

Scenario

I have scenario where I will parse the document then I will get as a JSON output in key and value format, In key it will contains headings of document and Value will contains corresponding section of the heading. Now I would like to bind the values into ng-model (text boxes in forms), I have 100+ textboxes , I may get different headings from document, if I am getting different headings I like to bind into ng-model with or condition like below code.

Requirement

I like to store all my ng-model names into array for eg:

var array = [$scope.FirstNgModel,$scope.SecondNgModel,$scope.ThirdNgModel,$scope.FourthNgModel,$scope.FifthNgModel]

then I will read the exact matching and I will map.

Current code is below

$.ajax(settings).done(function (response) {
    var docparsed = JSON.parse(response);
    //angular.forEach($scope.ModelMaping, function (obj) {
    angular.forEach(docparsed, function (obj) {
        //var ModelVal = obj.value;
        //var val = docparsed.find(x => x.key.toLocaleLowerCase() === ModelVal.toLocaleLowerCase())
        //obj.key = val.value;   
        if (obj.key.toLocaleLowerCase() == "first") {
            $scope.FirstNgModel = obj.value;
        }
        if (obj.key.toLocaleLowerCase() == "second") {

            $scope.SecondNgModel = obj.value;
        }
        if (obj.key.toLocaleLowerCase() == "third") {
            $scope.ThirdNgModel = obj.value;
        }
        if (obj.key.toLocaleLowerCase() == "fourth") {
            $scope.FourthNgModel = obj.value;
        }
        if ((obj.key.toLocaleLowerCase() == "fifth") || (obj.key.toLocaleLowerCase() == "sixth")) {
            $scope.FifthNgModel = obj.value;
        }
    });

Sample project

You can store parsed data into some ngModel, then you can create your form based on ngModal binding into the view using ng-repeat — kesh, Dec 18 '19 at 10:54
Or else you have to create 100+ number of variables, Pls help me understand more — kesh, Dec 18 '19 at 10:57
I am storing parsed values into array(as key value pairs), I wanted to assign the parsed values into ng-model. — Sathish Kasinathan, Dec 18 '19 at 12:25
angular.forEach($scope.test2, function (obj) { var the_string = obj; var model = $parse(the_string); model.assign($scope, 42); //console.log($scope.First); }); For More details please check the sample project — Sathish Kasinathan, Dec 24 '19 at 13:21

score 0 · Answer 1 · answered Dec 18 '19 at 10:49

If your keys are predefined, what if your NgModel is something like:

$scope.NgModel = { "first" : {}, "second" : {} ... }

Then you can just:

$.ajax(settings).done(function (response) {
    var docparsed = JSON.parse(response);
    angular.forEach(docparsed, function (obj) {   
        $scope.NgModel[obj.key.toLocaleLowerCase()] = obj.value
    });
});

Just a thought.

score 0 · Answer 2 · answered Dec 18 '19 at 15:56

With the AngularJS framework, use the $http service:

$http.get(url)
  .then(function(response) {
    $scope.data = response.data;
}).catch(function(error) {
    console.log(error);
});

No need to use jQuery.ajax.

In the HTML, use the ng-repeat directive:

<div ng-repeat="(key, value) in data">
    {{key}}
    <input type="text" ng-model="data[key]">
</div>

This will automatically display all 100+ entries in the data object.

To POST the data:

$http.post(url, $scope.data);

Keep ng-model in array and set values using loop AngularJs

2 Answers2