JSON file content not loading in HTML

Question

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?

Suren Srapyan · Accepted Answer · 2016-11-29 06:37:13Z

3

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

answered Nov 29, 2016 at 6:37

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

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

1 Comment

ellusion Over a year ago

Dumbest mistake I've ever spent 3 hours on. I guess it happens to all programmers...thanks for the fresh eyes!

Collectives™ on Stack Overflow

JSON file content not loading in HTML

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related