AngularJS,Iam getting Array of Objects from server,iam unable to fetch it in UI

Question

Iam getting Array of Objects as a Json from server,when iam trying to hit my Service URI from HTML iam getting below array in my console."angular.js:13920

Error: [$resource:badcfg] http://errors.angularjs.org/1.5.8/$resource/badcfg?p0=get&p1=object&p2=array&p3=GET&p4=%2Fagtools%2FfetchStates"

register.html

  <select class="form-control topMarginForRegister"  ng-
     model="LoginDetails.state" ng-click="getStatesData();">
     <option>Select state</option>
     <option ng-repeat="" value="{{state}}">{{state}}</option></select>

StateController.JS

 (function() {
        function loginModalController($scope, LOGIN_CONSTANTS, loginFactory) {
          $scope.getStatesData = function() {
            loginFactory.getStatesData($scope.state).then(function(response) {
                console.log("success");
              })
              .catch(function(error) {
                console.log("error");
              });
          };
        })();

LoginFactory.JS

 (function() {
    function loginFactory($q, LOGIN_CONSTANTS, $resource) {
      function getStatesData(state) {
        var stateData = $resource(LOGIN_CONSTANTS.FETCH_STATES_URL); //my service URL
        var defered = $q.defer();
        stateData.get(
          function(response) {
            defered.resolve(response);
          },
          function(error) {
            defered.reject(error);
          });
        return defered.promise;
      };
    })();

JSON iam getting FROM SERVER:

  [
    {
     "city":["ABBE","ADAM"],
     "state":"ALBAMA",
     "country":"US"
    },

    {
     "city":["ABDE","JODA"],
     "state":"ALAKA",
     "country":"US"
    }
    ]

Someone please help me how can i clear that error so that i will get the data from server.i tried $Resource.query still iam unable to get

refer this https://stackoverflow.com/questions/13269882/angularjs-resource-restful-example — Rahul Sharma, Feb 14 '18 at 15:24

score 0 · Answer 1 · answered Feb 14 '18 at 19:49

As written in error, you are trying to parse Array instead of Object. Ideally this should have been fixed with $resource.query, but you tried it and it is not working.

Then my suggestion would be to change your Response from array to object. I am not sure if it is possible in your case.

{
  "countryData": [
    {
      "city": [
        "ABBE",
        "ADAM"
      ],
      "state": "ALBAMA",
      "country": "US"
    },
    {
      "city": [
        "ABDE",
        "JODA"
      ],
      "state": "ALAKA",
      "country": "US"
    }
  ]
}

score 0 · Answer 2 · answered Feb 19 '18 at 09:34

Working Demo

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {
    $scope.data = [
    {
     "city":["ABBE","ADAM"],
     "state":"ALBAMA",
     "country":"US"
    },

    {
     "city":["ABDE","JODA"],
     "state":"ALAKA",
     "country":"US"
    }
    ];
});

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
  <select name="state" ng-model="state">
      <option>Select state</option>
     <option ng-repeat="details in data" value="{{details.state}}">{{details.state}}</option></select>
</div>
</body>
</html>

AngularJS,Iam getting Array of Objects from server,iam unable to fetch it in UI

2 Answers2