CODEWITHSUNDEEP
javascriptangularjsjsonionic-framework
dirkaka
dirkaka

Reputation: 128

Unable to Display JSON Data Received on HTML

So ive managed to get my script to retrieve some JSON data through $http.get and i get my JSON data in Object Form. However, im not able to use the values in the array.

JSON in Web Console

Here is my AppCtrl portion (AngularJS)

app.controller('AppCtrl', function($scope,$http) {


$scope.data = [];
$scope.submit = function() {

var link = 'http://www.mywebsite.com/api.asp';
$http.get(link).then(function(response) {
    $scope.data = response.data;
    console.log($scope.data);
});
};
});

Here is the HTML bit

<form ng-submit="submit()">
      <input class="button button-block button-positive" type="submit" name="submit" value="Submit To Server">
    </form>
    <div class="card">
        <li ng-repeat="userdata in data">
          Username : {{userdata.username}}
          Age : {{userdata.age}}
        </li>
    </div>

Eventhough ive retrieved the json data, im unable to retrieve it. Im guessing it has something to do with me not calling it right ? Thanks in advance.

UPDATE : The console.log($scope.data) returns

"0 925121 log [object Object]"

Ive attempted to run JSON.stringify on the response.data , i now get a different console.Log result , and a new error .

The console.log returned the JSON info as

{"data":[{"ID":1,"age":"24","username":"hidir"},{"ID":2,"age":"51","username":"ibrahim"}]}

And the error is the following which suggest that i have duplicate values in the array which doesnt look like it does. :

"Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: userdata in data, Duplicate key: string:a, Duplicate value: a
http://errors.angularjs.org/1.5.3/ngRepeat/dupes?p0=userdata%20in%20data&p1=string%3Aa&p2=a

"

Upvotes: 0

Views: 1095

Answers (5)

dirkaka
dirkaka

Reputation: 128

Thanks to @Abhinav 's code, I found out that the problem was with my JSON format. I hope someone can explain it here better for future references as I'm not well versed enough to explain in detail.

*First JSON Format that didn't work

{"data":[{"ID":1,"age":"24","username":"hidir"},{"ID":2,"age":"51","username":"ibrahim"}]}

For the above code, it will only work if I call it with {{userdata[0].username}}. Using the ng-repeat with this format will fail.

Array Form (working for Ionic)

[{"ID":1,"age":"24","username":"hidir"},{"ID":2,"age":"51","username":"ibrahim"}]

ng-repeat works well with the second format.

Upvotes: 0

Devidas Kadam
Devidas Kadam

Reputation: 944

Use this 

$http({
  url : link,
  method : "GET",
  headers: {
      'Content-Type': 'applcation/json'
     }
}).then(function(response) {
    console.log(response);
    $scope.data = angular.fromJson(response.data);
    console.log($scope.data);
});

Upvotes: 0

Abhinav
Abhinav

Reputation: 353

Can you try this?

app.controller('AppCtrl', function($scope,$http) {
    $scope.name = null;
    $scope.submit = function() {
        var link = 'http://www.mywebsite.com/api.asp';
        $http.get(link).then(function(response) {
            $scope.data = response.data;
            if(!$scope.$$phase) {
                //$digest or $apply
                $scope.$apply();
            }
        });
    };
});

Upvotes: 1

Meesam
Meesam

Reputation: 109

try to use JSON.stringify(response.data);

Upvotes: 0

Murali
Murali

Reputation: 409

why don't you use success function after $http call like below

$http.get(link).success(function(response) {
    console.log(response);
});
};

Upvotes: 0

Related Questions