CODEWITHSUNDEEP
javascriptangularjsjson
Thassa
Thassa

Reputation: 542

JSON elements not loading on AngularJS page

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."}

]

Upvotes: 0

Views: 20

Answers (2)

gaurav5430
gaurav5430

Reputation: 13892

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

Upvotes: 2

bladekp
bladekp

Reputation: 1647

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>

Upvotes: 1

Related Questions