CODEWITHSUNDEEP
javascriptasp.netangularjsjsonjson.net
Omar Seleim
Omar Seleim

Reputation: 185

$http get in Angular Js

The result page is empty and doesn't show any data

Js File contains :

var Movies = angular.module('Movies', []);
Movies.controller('MoviesController',['$scope', '$http', function      
($scope, $http) {
    $http.get('http://localhost:19290/CinemaAngularJs/JS/data.json')
    .success(function (data) {
      $scope.Movies = data.Movs;
    })
    .error(function (data) {
      alert("Error occur");
    });
}]);

Data.json File contains :

"Movs":[
{
  "name":"Mision Impossible",
  "img":"mi",
  "year":"2012",
  "short":"Mision Impossible 2012 Mision Impossible 2012Mision Impossible  
2012 Mision Impossible 2012",
  "description":"Mision Impossible 2012 Mision Impossible 2012Mision 
},
{
.............
}]

HTML File contains :

<html xmlns="http://www.w3.org/1999/xhtml" ng-app="Movies">
<head runat="server">
  <title></title>    
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.1/angular2.min.js"></script>
  <script src="angular.min.js"></script>
  <script src="JS/controller.js"></script>
</head>
<body>
  <form id="form1" runat="server">
    <div ng-controller="MoviesController">
      <ul class="large-block-grid-4 small-block-grid-2">
        <li ng-repeat="mov in Movies">
           <h2>name : {{mov.name}}</h2>
           <img ng-src="Img/{{mov.img}}.jpg" alt="Image Here" />
           <h3>year : {{mov.year}}</h3>
           <h3>year : {{mov.short}}</h3>
           <h3>year : {{mov.description}}</h3>
         </li>
      </ul>
    </div>
  </form>
</body>
</html>

What are Errors in code ? What I can should do to run code ?

Upvotes: 3

Views: 105

Answers (3)

Karl Gjertsen
Karl Gjertsen

Reputation: 4928

Run the developer tools by pressing F12 in your browser. Are you shown any error messages in the console window?

This will show you any errors in the syntax...but not your logic!

UPDATE: Your JSON is invalid. Try pasting it in to www.jsoneditoronline.org to see for yourself.

Can you change your JSON to:

{
"Movs": [{
    "name": "Mision Impossible",
    "img": "mi",
    "year": "2012",
    "short": "Mision Impossible 2012 Mision Impossible 2012Mision Impossible 2012 Mision Impossible 2012",
    "description": "Mision Impossible 2012 Mision Impossible 2012Mision"
}]
}

Upvotes: 1

RPichioli
RPichioli

Reputation: 3345

Your JSON is invalid, try something like:

{
	"Movs": [{
		"name": "Mision Impossible",
		"img": "mi",
		"year": "2012",
		"short": "Mision Impossible 2012 Mision Impossible 2012Mision Impossible 2012 Mision Impossible 2012",
		"description": "Mision Impossible 2012 Mision Impossible 2012Mision"
	}]
}

I have validate this code, it's ok.

Your angular code is correct but you could validate if the result contains any data and show a warning. Just a suggestion.

Upvotes: 1

a.u.b
a.u.b

Reputation: 1609

Please console.log(data) and check it. Is valid JSON object or JSON string? I think we need: 

$http.get('http://localhost:19290/CinemaAngularJs/JS/data.json').success(function (data) {
    var temp =JSON.parse(data);
    $scope.Movies = temp.Movs;
    })
    .error(function (data) {
        alert("Error occur");
    });

Upvotes: 2

Related Questions