I have successfully managed to use $http.get in my script to retrieve JSON data, which I receive in Object Form. However, I am facing issues when trying to access the values in the array.
https://i.sstatic.net/skKjq.png
Below is a snippet of 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);
});
};
});
And this is the HTML section:
<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>
Although I have retrieved the JSON data, I am having difficulty accessing it properly. I suspect that I might not be calling it correctly. Any guidance would be appreciated!
UPDATE: When I run console.log($scope.data), I see:
"0 925121 log [object Object]"
I tried using JSON.stringify on the response.data and now I get a different console.log result along with a new error message.
The console.log displays the JSON information as follows:
{"data":[{"ID":1,"age":"24","username":"hidir"},{"ID":2,"age":"51","username":"ibrahim"}]}
However, I encountered an error indicating duplicate values in the array, even though it doesn't seem like there are any duplicates:
"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
"