CODEWITHSUNDEEP
javascriptjsonangularjsangularjs-ng-repeat
MMMMS
MMMMS

Reputation: 2201

Angularjs - json content not displaying

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=UbgZ­uDAmAM" 
    }] 
}

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.

Upvotes: 0

Views: 1936

Answers (3)

HknLof
HknLof

Reputation: 121

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.

Upvotes: 0

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

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

Upvotes: 1

Anik Islam Abhi
Anik Islam Abhi

Reputation: 25352

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>

Upvotes: 1

Related Questions