$http get in Angular Js

Question

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 ?

Take a little pride in your question. Clean it up and we will help. — Nix
– Nix, Commented Feb 11, 2016 at 12:10
There is nothing wrong with the code (but i did run it in angular 1.4 vs 2.0 ) jsfiddle.net/ncapito/zsj835mc/2 I would suggest you take a look at your data and make sure its coming back correctly. — Nix
– Nix, Commented Feb 11, 2016 at 12:20

ahmetugurbulut · Accepted Answer · 2016-02-11 12:41:30Z

2

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");
    });

answered Feb 11, 2016 at 12:41

ahmetugurbulut

1,60911 silver badges25 bronze badges

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

1 Comment

Omar Seleim Over a year ago

Also I haven't any result "empty page"

RPichioli · Accepted Answer · 2016-02-11 13:06:30Z

1

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.

answered Feb 11, 2016 at 13:06

RPichioli

3,3553 gold badges27 silver badges31 bronze badges

Comments

Karl Gjertsen · Accepted Answer · 2016-02-14 11:40:56Z

1

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

edited Feb 14, 2016 at 11:40

answered Feb 11, 2016 at 13:00

Karl Gjertsen

4,9588 gold badges43 silver badges64 bronze badges

4 Comments

Omar Seleim Over a year ago

When Run the code and press F12 in browser console window is empty "have no errors"

Karl Gjertsen Over a year ago

Then the code doesn't have any errors. What about the file you are loading? Do you know if the app is reading it?

Omar Seleim Over a year ago

the page can't read the json file I want to know why? and I want to view json file in html page .

Karl Gjertsen Over a year ago

The JSON is invalid. I will update my answer to show you.

Collectives™ on Stack Overflow

$http get in Angular Js

3 Answers 3

1 Comment

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related