Json Data Handling using AngularJS

Question

I have a new case, where I need help. I want to have 9 buttons and a panel that displays the movie details, depending on which one has been clicked. So say if I clicked 'Transformers', the transformers detail should appear in the panel. Then if I were to click 'Fury', the panel detail would change to the Fury details. I need this data to be in a JSON file. I've looked, how to do this and struggle to understand how I would go about doing this. Here's what I've got so far.

JS:

var app = angular.module("myApp", []);

app.controller('MainController', ['$scope', function ($scope) {


}])

JSON:

{
  "movie": [
  {
    "id": 1,
    "name": "Star Wars The Phantom Menace",
    "format": "DVD",
    "rate": 4,
    "price": 2
  },
  {
    "id": 2,
    "name": "Star Wars A New Hope",
    "format": "DVD",
    "rate": 6,
    "price": 4
  },
  {
    "id": 3,
    "name": "Transformers",
    "format": "Blu-Ray",
    "rate": 7,
    "price": 3
  },
  {
    "id": 4,
    "name": "Transformers Dark of the Moon",
    "format": "Blu-Ray",
    "rate": 6,
    "price": 5
  }
]}

HTML:

  <body ng-controller="MainController" ng-app="myApp">
    <h1 style="text-align:center">Garrett's Rentals</h1>

    <div ng-repeat="movie in movies">
      <button>{{movie.name}}</button>
    </div>

    <div class="panel">
      <h3>You have selected:</h3>
      <p>{{movie.name}}</p>
      <p>{{movie.format}}</p>
      <p>{{movie.rate}}</p>
      <p>{{movie.price}}</p>
    </div>
  </body>

Shubham Nigam · Accepted Answer · 2015-06-09 10:16:24Z

2

use

var app = angular.module("myApp", []);

app.controller('MainController', ['$scope', function ($scope) {
    var json={
  "movie": [
  {
    "id": 1,
    "name": "Star Wars The Phantom Menace",
    "format": "DVD",
    "rate": 4,
    "price": 2
  },
  {
    "id": 2,
    "name": "Star Wars A New Hope",
    "format": "DVD",
    "rate": 6,
    "price": 4
  },
  {
    "id": 3,
    "name": "Transformers",
    "format": "Blu-Ray",
    "rate": 7,
    "price": 3
  },
  {
    "id": 4,
    "name": "Transformers Dark of the Moon",
    "format": "Blu-Ray",
    "rate": 6,
    "price": 5
  }
  ]};
console.log(json);
$scope.movies=json.movie;
    console.log($scope.movie);
}]);

HTML

    <body ng-controller="MainController" ng-app="myApp">
    <h1 style="text-align:center">Garrett's Rentals</h1>

    <div ng-repeat="movie in movies">
      <button>{{movie.name}}</button>
    </div>

    <div class="panel">
      <h3>You have selected:</h3>
      <p>{{movie.name}}</p>
      <p>{{movie.format}}</p>
      <p>{{movie.rate}}</p>
      <p>{{movie.price}}</p>
    </div>
  </body>

Fiddle for support:http://jsfiddle.net/sXkjc/993/

edited Jun 9, 2015 at 10:16

answered Jun 9, 2015 at 10:05

Shubham Nigam

3,96821 silver badges33 bronze badges

This didn't work, just returned {{movies.movie.name}}

TheGarrett
– TheGarrett

06/09/2015 10:11:15
Commented Jun 9, 2015 at 10:11
Please recheck answer I hav edited and provided a new fiddle for solution

Shubham Nigam
– Shubham Nigam

06/09/2015 10:17:03
Commented Jun 9, 2015 at 10:17
Thank you, the ng-repeat works on this but it doesn't display the movies data when the button is clicked?

TheGarrett
– TheGarrett

06/09/2015 10:18:22
Commented Jun 9, 2015 at 10:18
I'm very happy! How would I do this if I were to have the JSON a seprate file?

TheGarrett
– TheGarrett

06/09/2015 11:15:38
Commented Jun 9, 2015 at 11:15
you can use the JSON.parse() its a javascript method that will convert into a object

Shubham Nigam
– Shubham Nigam

06/09/2015 11:17:22
Commented Jun 9, 2015 at 11:17

| Show 3 more comments

Manish Parakhiya · Accepted Answer · 2015-06-09 10:18:32Z

Use ng-click directive on button to set current selected movie like follwing.

var app = angular.module("myApp", []);

app.controller('MainController', ['$scope', function ($scope) {
   $scope.movies= movies; //here movies is your json object
   $scope.selectedMovie=$scope.movies[0]; // assume that first movie is selected default
}])

HTML

<div ng-repeat="movie in movies">
  <button ng-click="selectedMovie=movie">{{movie.name}}</button>
</div>

<div class="panel">
  <h3>You have selected:</h3>
  <p>{{selectedMovie.name}}</p>
  <p>{{selectedMovie.format}}</p>
  <p>{{selectedMovie.rate}}</p>
  <p>{{selectedMovie.price}}</p>
</div>

KuZon · Accepted Answer · 2015-06-09 10:19:14Z

0

JS

angular.module('myApp', [])

.controller('MainController',['$scope','$http',function($scope,$http){


  $scope.contents=null;
  $http.get('URL TO JSON').then(function(resp){
    console.log('Success', resp);
    $scope.contents=resp.data;


  },
  function(err){
    console.error('ERR',err);
  })

}]);

HTML

 <body ng-controller="MainController" ng-app="myApp">
<h1 style="text-align:center">Garrett's Rentals</h1>

<div ng-repeat="movie in movies">
  <button>{{movie.name}}</button>
</div>

<div class="panel">
  <h3>You have selected:</h3>
  <p>{{movie.name}}</p>
  <p>{{movie.format}}</p>
  <p>{{movie.rate}}</p>
  <p>{{movie.price}}</p>
</div>

edited Jun 9, 2015 at 10:19

answered Jun 9, 2015 at 10:08

KuZon

1551 gold badge1 silver badge7 bronze badges

How would I then call the data in the html?

TheGarrett
– TheGarrett

06/09/2015 10:10:37
Commented Jun 9, 2015 at 10:10
you can use ng-click=function({{movie.name}}) in button tag.you can define a function in your controller which selects the corrsponding movie then

KuZon
– KuZon

06/11/2015 05:38:31
Commented Jun 11, 2015 at 5:38

Add a comment |

Debasish Mohapatra · Accepted Answer · 2015-06-09 10:20:41Z

Controller Code:

var app = angular.module("myApp", []);

    app.controller('MainController', ['$scope', function ($scope) {

        $scope.movies = {

            movie: [
            {
                id: 1,
                name: "Star Wars The Phantom Menace",
                format: "DVD",
                rate: 4,
                price: 2
            },
            {
                id: 2,
                name: "Star Wars A New Hope",
                format: "DVD",
                rate: 6,
                price: 4
            },
            {
                id: 3,
                name: "Transformers",
                format: "Blu-Ray",
                rate: 7,
                price: 3
            },
            {
                id: 4,
                name: "Transformers Dark of the Moon",
                format: "Blu-Ray",
                rate: 6,
                price: 5
            }
            ]}

            $scope.setMovie = function(movie) {
            $scope.currentMovie = movie;
        }

    }])

HTML:

<html ng-app="myApp">

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
    <script src="app.js"></script>
  </head>


     <body ng-controller="MainController" >
    <h1 style="text-align:center">Garrett's Rentals</h1>

    <div ng-repeat="movie in movies.movie">
      <button ng-click = "setMovie(movie)">{{movie.name}}</button>
    </div>

    <div class="panel">
      <h3>You have selected:</h3>
      <p>{{currentMovie.name}}</p>
      <p>{{currentMovie.format}}</p>
      <p>{{currentMovie.rate}}</p>
      <p>{{currentMovie.price}}</p>
    </div>
  </body>

</html>

http://plnkr.co/edit/0f5bbaS38GCIjGtCfLmy?p=preview

vamsikrishnamannem · Accepted Answer · 2015-06-09 10:22:39Z

I have given a working example of your requirements see http://plnkr.co/edit/uQLqB3CfSUlETQEcpsS5?p=preview

Change the html to

<div ng-repeat="movie in movies">
      <button ng-click="selectedMovie(movie)">{{movie.name}}</button>
    </div>

    <div class="panel">
      <h3>You have selected:</h3>
      <p>{{movie.name}}</p>
      <p>{{movie.format}}</p>
      <p>{{movie.rate}}</p>
      <p>{{movie.price}}</p>
    </div>

javascript to

myApp.controller('MainController', ['$scope', function($scope) {
    var data = {
  "movie": [
  {
    "id": 1,
    "name": "Star Wars The Phantom Menace",
    "format": "DVD",
    "rate": 4,
    "price": 2
  },
  {
    "id": 2,
    "name": "Star Wars A New Hope",
    "format": "DVD",
    "rate": 6,
    "price": 4
  },
  {
    "id": 3,
    "name": "Transformers",
    "format": "Blu-Ray",
    "rate": 7,
    "price": 3
  },
  {
    "id": 4,
    "name": "Transformers Dark of the Moon",
    "format": "Blu-Ray",
    "rate": 6,
    "price": 5
  }
]};
$scope.movies = data.movie;
$scope.selectedMovie = function(movie){
  $scope.movie = movie;
}
}]);

Christina · Accepted Answer · 2015-06-09 10:34:10Z

All you need to do is define the movies object inside your controller in order for the movies to be displayed in your front-end. Embedding the movies JSON directly in your controller would look something like this:

app.controller('MainController', ['$scope', function ($scope) {
 $scope.movies1 = 
  [{
    "id": 1,
    "name": "Star Wars The Phantom Menace",
    "format": "DVD",
    "rate": 4,
    "price": 2
  },
  {
    "id": 2,
    "name": "Star Wars A New Hope",
    "format": "DVD",
    "rate": 6,
    "price": 4
  },
  {
    "id": 3,
    "name": "Transformers",
    "format": "Blu-Ray",
    "rate": 7,
    "price": 3
  },
  {
    "id": 4,
    "name": "Transformers Dark of the Moon",
    "format": "Blu-Ray",
    "rate": 6,
    "price": 5
  }];
}]);

Note that I have removed the movie property from inside the movies object and converted movies to an array instead, so that ng-repeat will work properly.

If instead you need to have the movies JSON as a separate file you can load that file using the $http service as @KuZon noted.

$http.get('movies.json').then(function(json) {
    $scope.movies1 = json.data.movie;
  });

In this case I have left the movie attribute inside the JSON object, and used it to select the array to store in $scope.movies1.

You can see both approaches in this Plunkr

Finally, don't forget to use ng-click on your buttons to actually select the movie. Something like the following:

<button ng-click="selectMovie1(movie)">{{movie.name}}</button>

and in your controller:

$scope.selectMovie1 = function(movie) {
   $scope.movie1 = movie
 }

Thanks for the help but the ng-repeats don't work on these 2 examples on Plunkr? — TheGarrett
– TheGarrett, Commented Jun 9, 2015 at 10:20
@TheGarrett It seems to me that Plunkr is currently having some issues because I can't even open the plunker right now. Hopefully it will be resolved soon but in the meantime I have added a few extra code samples in my answer. Perhaps these will be useful. — Christina
– Christina, Commented Jun 9, 2015 at 10:26
@TheGarrett It seems to be back online now so you can try again. — Christina
– Christina, Commented Jun 9, 2015 at 10:29

Collectives™ on Stack Overflow

Json Data Handling using AngularJS

6 Answers 6

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Your Answer

Sign up or log in

Post as a guest

Related