How to bind json data to angularJS view using $scope?

Question

I have a JSON response from the backend that i want to display to the front end so in below case i am not able to bind $scope value to view.If i change response into object instead of array its populating.How to populate array object to the view ?

main.html

<div class="row">
        <div class="form-group col-md-6">
            <div class="col-md-3">
                <label for="workerName">Full Name:</label>
            </div>
            <div class="col-md-9">
                <input type="text" class="form-control" name="workerName" ng-model="data.firstName">
            </div>
        </div>
        <div class="form-group col-md-6">
            <div class="col-md-3">
                <label for="workerName">Address:</label>
            </div>
            <div class="col-md-9">
                <input type="text" class="form-control" name="workerName" ng-model="data.lastName">
            </div>
        </div>
    </div>

app.js

var Obj = [{firstName: "Mike", lastName:"wegner"},{firstName:"John",lastName:"Ruch"}];

app.get('/test', function (req, res) {
  res.send(Obj);
});

workerFacotry.js

angular.module('myApp').factory('workerFactory', function ($http) {
    'use strict';
    return {
        getData: function(){
            return $http.get('/test');
        }
    }
});

workerController.js

angular.module('myApp').controller('WorkerController', function ($scope,workerFactory) {
    'use strict';
    $scope.test = function(){
        alert("first functiona is working");
    };
    $scope.data = [];
    $scope.getTestData = function(){
        workerFactory.getData().then(function(response){
            $scope.data = response.data;
            console.log("Data from server",$scope.data);
        })
    }
});

Json.js

[{
    "firstName": "Mike",
    "lastName": "wegner"
}, {
    "firstName": "John",
    "lastName": "Ruch"
}]

Are you looping through the objects in the response in your angular frontend? All we see is one row. — mariocatch
– mariocatch, Commented Jan 25, 2016 at 2:32
this HTML doesn't match your data. your data object doesn't have a firstName property; rather, your data is an array with multiple objects that have said property. Therefore you need to iterate the array; this is typically done by using ng-repeat. docs.angularjs.org/api/ng/directive/ngRepeat#! — Claies
– Claies, Commented Jan 25, 2016 at 2:37
@mariocatch No i am not looping my whole code is in the question i am new to angular if i can get some idea how to populate value for ng-model it would be great — aftab
– aftab, Commented Jan 25, 2016 at 2:45
@Claies I want to use ng-model so i can post form with data object. — aftab
– aftab, Commented Jan 25, 2016 at 2:46
As the answer below states, you need to loop through your model, since it has more than one object in it. ng-repeat="d in data" — mariocatch
– mariocatch, Commented Jan 25, 2016 at 2:47

mani · Accepted Answer · 2016-01-25 02:40:28Z

1

Loop through the data using ngRepeat directive as:

<div class="row" ng-repeat="d in data">
        <div class="form-group col-md-6">
            <div class="col-md-3">
                <label for="workerName">Full Name:</label>
            </div>
            <div class="col-md-9">
                <input type="text" class="form-control" name="workerName" ng-model="d.firstName">
            </div>
        </div>
        <div class="form-group col-md-6">
            <div class="col-md-3">
                <label for="workerName">Address:</label>
            </div>
            <div class="col-md-9">
                <input type="text" class="form-control" name="workerName" ng-model="d.lastName">
            </div>
        </div>
    </div>

answered Jan 25, 2016 at 2:40

mani

3,1162 gold badges17 silver badges25 bronze badges

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

6 Comments

aftab Over a year ago

I want to use ng-model so i can post form values later with the data object.

mani Over a year ago

ngModel is still used... @aftab

aftab Over a year ago

oh ok but is there way to populate data without ng-repeat , what changes i have to make in my controller to go for ng-model options

mariocatch Over a year ago

If you have an array of data you want to display, then you need to use ng-repeat. That's what it's for.

mani Over a year ago

ngRepeat iterates over the items in your data array, and outputs the html for each item. You could manually repeat the html if you know how many items you will be expecting i.e. how many names you're expecting. Then you can access data[0].firstName and data[0].lastName, etc in ngModel. However, I would highly recommend you familiarise yourself with both ngModel and ngRepeat and actually use ngRepeat for your purposes instead of manually rewriting your `html.

|

Collectives™ on Stack Overflow

How to bind json data to angularJS view using $scope?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related