Angularjs - json content not displaying

Question

This is the first time I am using Angularjs to display contents from json using the code below,

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-controller="GetVideosFiles">

<ul ng-repeat=" x in GetData ">
<li>example</li>
    <li><h1>{{ x.videos.Title }}</h1></li>
    <li>{{x.videos.Description}}</li><br><br>
    <li><button>{{x.videos.Url}}</button></li>
</ul>


</div>

<script type="text/javascript">


function GetVideosFiles($scope,$http){
    $http.get("VideoFile.json")
    .success(function(rsp){
        $scope.GetData = rsp;
        });
        }


</script>


</body>
</html>

VideoFile.json :

{ 
    "videos": [{ 
        "Title": "Windmill", 
        "Description": "What are wind mills? Are they giant fans? How do they work?", 
        "Url": "https://www.youtube.com/watch?v=Zrp0RC3XTpw" 
    }, { 
        "Title": "Race Car", 
        "Description": "Yeah, we know that your kid loves his cars", 
        "Url": "https://www.youtube.com/watch?v=zAteCGxrCSo" 
    }, { 
        "Title": "Blow Painting", 
        "Description": "The gentle wind has many an artist", 
        "Url": "https://www.youtube.com/watch?v=LKs3nw7YcR8" 
    }, , { 
        "Title": "Dreamcatcher", 
        "Description": "The wind turned naughty and blown the pieces of Dream catcher all over 
the hose", 
        "Url": "https://www.youtube.com/watch?v=UbgZuDAmAM" 
    }] 
}

but this code is not working for me.

I want to display my page like this:

enter image description here

Could someone tell me what I am doing wrong?

Updated :

<div ng-app="app" ng-controller="GetVideosFiles">

<ul ng-repeat=" x in GetData.videos ">
<li>example</li>
    <li><h1>{{ x.Title }}</h1></li>
    <li>{{x.Description}}</li><br><br>
    <li><a ng-href="{{ x.Url }}">Watch video</a></li>  
</ul>


</div>

<script type="text/javascript">


var app=angular.module("app",[]);
app.controller("GetVideosFiles",GetVideosFiles);
function GetVideosFiles($scope,$http){
    $http.get("VideoFile.json")
    .success(function(rsp){
        //alert(rsp);
        $scope.GetData = rsp;
        });
        }

</script>

I have updated my code based on one of the answers but it is still not working.

@pankajparkar i dont get any error but content not displaying. — MMMMS
– MMMMS, Commented May 27, 2015 at 6:01

Anik Islam Abhi · Accepted Answer · 2015-05-27 06:32:38Z

1

You controller declaration is not right and you ng-repeat object mention is wrong and put your json file in the same directory of html.

Try like this

<div ng-app="app" ng-controller="GetVideosFiles">

<ul ng-repeat=" x in GetData.videos ">
<li>example</li>
    <li><h1>{{ x.Title }}</h1></li>
    <li>{{x.Description}}</li><br><br>
    <li><button>{{x.Url}}</button></li>
</ul>


</div>

<script type="text/javascript">

var app=angular.module("app",[]);
app.controller("GetVideosFiles",GetVideosFiles);
function GetVideosFiles($scope,$http){
    $scope.GetData=[];
    $http.get("VideoFile.json")
    .success(function(rsp){
        $scope.GetData = rsp;
        });
        }


</script>

edited May 27, 2015 at 6:32

answered May 27, 2015 at 5:44

Anik Islam Abhi

25.4k8 gold badges61 silver badges82 bronze badges

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

2 Comments

Anik Islam Abhi Over a year ago

can you provide me errors in your console ?? or can you provide me plunkr link of your project ?>

MMMMS Over a year ago

Let us continue this discussion in chat.

Pankaj Parkar · Accepted Answer · 2015-05-27 08:44:03Z

1

You ng-repeat is wrong

Markup

<ul ng-repeat="x in GetData.videos">
    <li>example</li>
    <li><h1>{{ x.Title }}</h1></li>
    <li>{{x.Description}}</li><br><br>
    <li><button>{{x.Url}}</button></li>
</ul>

Demo Plunkr

edited May 27, 2015 at 8:44

answered May 27, 2015 at 6:11

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Comments

HknLof · Accepted Answer · 2015-05-27 09:00:31Z

I assume the list entry should be repeated and not the entire list. Therefore try something like this:

<ul>
 <li ng-repeat=" x in GetData.videos "><p>example</p>
  <p><h1>{{ x.Title }}</h1></p>
  <p>{{x.Description}}</p><br><br>
<p><button>{{x.Url}}</button></p></li>
</ul>

Plus you should declare dependecies directly, like this:

app.controller("GetVideoFiles", ["$scope", "$http", GetVideoFiles]);

See: https://github.com/johnpapa/angular-styleguide#manual-annotating-for-dependency-injection. This will make sure you get your dependencies right.

Collectives™ on Stack Overflow

Angularjs - json content not displaying

3 Answers 3

2 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Related