How to populate the json data using angularjs?

Question

I ve been trying to populate a searchable drop down list using json data with angularjs , i ve pushed the json data in the server and i ve been able to receive the response from the server if i use the get method.I dont know exactly how to query the json data and populate them in the search bar. I ve attached the controller script and the html

var app=angular.module('myapp',[]);
app.controller('myctrl',function($scope,$http){
    $http({
        method:"GET",
        url:"http://localhost:5050/codes?val="}).then(function mySuccess(response){
        $scope.msg=response.data;
    },function myError(response){
        $scope.msg=response.statusText;
    });
});
<!DOCTYPE html>

signals

<body>
    <div ng-app="myapp" ng-controller="myctrl" >
        <select ng-model="search">
            <option ng-repeat="names in msg " value="{{names.value}}"></option>
            </select>
    </div>
</body>

This is the sample json data that i am feeding to the page from the local host i have to populate the search bar with the "value" part of the json data.

{"codes":
   [{"code": "NSE/AHLWEST", "value": "Asian Hotels (West) Limited"}, 
   {"code": "NSE/JINDALSWHL", "value": "Jindal South West Holding Limited"}, 
   {"code": "NSE/WIPL", "value": "The Western India Plywoods Limited"}, 
   {"code": "NSE/WSTCSTPAPR", "value": "West Coast Paper Mills Limited"}]
 }

You are receiving JSON as an objects so better use msg.codes in your ng-repeat tag — Lokesh Pandey
– Lokesh Pandey, Commented Dec 15, 2017 at 8:29

Sachila Ranawaka · Accepted Answer · 2017-12-15 08:32:43Z

2

Need to access the codes property. And also it is better to use ng-options rather than ng-repeat in this scenario

<select ng-model="search" ng-options="names.value as names.code for names in msg.codes"> 
</select>

answered Dec 15, 2017 at 8:32

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

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

2 Comments

Sathish Sridhar Over a year ago

Than you so much

Sachila Ranawaka Over a year ago

@SathishSridhar No problem :)

Sajeetharan · Accepted Answer · 2017-12-15 08:27:19Z

1

You need to access codes

<option ng-repeat="names in msg.codes " value="{{names.value}}"></option>

answered Dec 15, 2017 at 8:27

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

2 Comments

Sathish Sridhar Over a year ago

Than you so much :)

Sathish Sridhar Over a year ago

The above code worked better , i thought i could have multiple answers.Thanks once again :)

Collectives™ on Stack Overflow

How to populate the json data using angularjs?

2 Answers 2

2 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Related