ellusion ellusion - 9 days ago 5
AngularJS Question

JSON file content not loading in HTML

I've seen a couple similar responses but they don't address my problem. Complete novice in html/JS.

JSON file, hosted on remote webserver:

[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]


Here is my JS code. The HTTP.get is to a website that lets you store JSON data into a temporary webserver.

automate.js:

var parsefile = angular.module("parser", []);

parsefile.controller("parserCtrl", function($scope, $http){
$http.get("https://api.myjson.com/bins/wpkh").then(function(response){

$scope.stuff = response.data;
})


And a part of my HTML code is:

<div ng-app = "parser" ng-controller="parserCtrl">
<ul>
<li ng-repeat="x in stuff">
{{ stuff.firstName }}
</li>
</ul>
</div>
<script src="automate.js"></script>


But when I run it, the only thing that prints is literally {{stuff.firstName}}.

Any tips?

Answer

You have

<li ng-repeat="x in stuff">
    {{ stuff.firstName }}
 </li>

which will try to print the stuff's firstName. Change it into

<li ng-repeat="x in stuff">
    {{ x.firstName }}
 </li>

And also try to check if your server returns any data, which you assign to the $scope.stuff