TechQA.

Json Data Handling using AngularJS

207 views Asked by At

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>
javascript arrays json angularjs angularjs-ng-repeat
Original Q&A
6

There are 6 answers

8
Shubham Nigam On BEST ANSWER

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/

2
KuZon On

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>

3
Christina On

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
 }
0
Manish Parakhiya On

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>
0
Debasish Mohapatra On

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

0
vamsikrishnamannem On

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

Related Questions in JAVASCRIPT

Related Questions in ARRAYS

Related Questions in JSON

Related Questions in ANGULARJS

Related Questions in ANGULARJS-NG-REPEAT

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions