JSON elements not loading on AngularJS page

Question

I'm working on using JSON to keep a list of media themes. When trying to load it, however, I get a blank section where they should be on the page. I get no errors on my console, implying that something is missing from my HTML or my JavaScript. Any pointers are much appreciated.

The HTML:

<div class="themeContainer">
        <div ng-repeat="theme in themes" class="repeated-item" flex>
            <img ng-src="{{themes.thumb}}" class="md-avatar" />
            <h4>{{themes.title}}</h4>
            <h5>{{themes.desc}}</h5>
        </div>
     </div>

The Angular script:

'use strict';

angular.module('careApp.pTheme', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/pTheme', {
    templateUrl: './templates/pTheme.html',
    controller: 'pThemeCtrl'
  });
}])

.controller('pThemeCtrl', function($scope, $http) {
    $http.get('./templates/scripts/themes.json').then(function(res){
        $scope.themes = res.data;
    });
});

And finally, the JSON in question:

[

{"thumb": "./templates/scripts/thumbs/01.jpg", "title": "Mt. Hood Sunset", "desc": "A relaxing view of Mt. Hood, Oregon."},
{"thumb": "./templates/scripts/thumbs/02.jpg", "title": "Misty Rainforest", "desc": "Tap, Pay 1 life, Sacrifice Misty Rainforest: search your library for a Forest or Island card and put it onto the battlefield. Then shuffle your library. "},
{"thumb": "./templates/scripts/thumbs/03.jpg", "title": "Clouds", "desc": "Blue skies and white clouds."}

]

What are the errors you're getting in the console? Also, can you see the content of the json file in the "network" tab? — Alon Eitan
– Alon Eitan, Commented Feb 17, 2016 at 16:24
As mentioned in my post, I have no errors in my console. I can see the JSON content in my network, too. — Thassa
– Thassa, Commented Feb 17, 2016 at 16:37

gaurav5430 · Accepted Answer · 2016-02-17 16:27:04Z

2

I am not sure if this is the issue , but this is atleast one of the problems

<div ng-repeat="theme in themes" class="repeated-item" flex>
            <img ng-src="{{themes.thumb}}" class="md-avatar" />
            <h4>{{themes.title}}</h4>
            <h5>{{themes.desc}}</h5>
        </div>

should be

<div ng-repeat="theme in themes" class="repeated-item" flex>
            <img ng-src="{{theme.thumb}}" class="md-avatar" />
            <h4>{{theme.title}}</h4>
            <h5>{{theme.desc}}</h5>
        </div>

You are using themes instead of theme inside ng-repeat

answered Feb 17, 2016 at 16:27

gaurav5430

14.1k8 gold badges73 silver badges127 bronze badges

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

Comments

bladekp · Accepted Answer · 2016-02-17 16:26:27Z

1

Your html elements inside ng-repeat should point to 'theme' instead of 'themes'

<div class="themeContainer">
    <div ng-repeat="theme in themes" class="repeated-item" flex>
        <img ng-src="{{theme.thumb}}" class="md-avatar" />
        <h4>{{theme.title}}</h4>
        <h5>{{theme.desc}}</h5>
    </div>
 </div>

answered Feb 17, 2016 at 16:26

bladekp

1,67727 silver badges31 bronze badges

Collectives™ on Stack Overflow

JSON elements not loading on AngularJS page

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related