Utilizing AngularJS for Managing JSON Data

Question

Utilizing AngularJS for Managing JSON Data

I'm facing a new challenge and need some assistance. My goal is to create 9 buttons and a panel that will display movie details based on the button clicked. For example, if I click 'Transformers', I want the panel to show details about Transformers. If I then click 'Fury', I want the panel content to switch to Fury's details. To achieve this, I plan to store the data in a JSON file. However, I am struggling to figure out how to implement this. Here is my current progress:

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

Answer 1

Answer №1

utilize

let application = angular.module("myApp", []);

application.controller('MainController', ['$scope', function ($scope) {
    let 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);
}]);

XHTML

    <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>

Support Fiddle:http://jsfiddle.net/sXkjc/993/

Answer 2

utilize

let application = angular.module("myApp", []);

application.controller('MainController', ['$scope', function ($scope) {
    let 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);
}]);

XHTML

    <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>

Support Fiddle:http://jsfiddle.net/sXkjc/993/

Answer 3

Answer №2

Implement the ng-click directive on a button to dynamically set the currently selected movie as shown below:

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

app.controller('MainController', ['$scope', function ($scope) {
   $scope.movies= movies; // The variable movies represents your JSON object
   $scope.selectedMovie=$scope.movies[0]; // Assume that the first movie is selected by 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>

Answer 4

Implement the ng-click directive on a button to dynamically set the currently selected movie as shown below:

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

app.controller('MainController', ['$scope', function ($scope) {
   $scope.movies= movies; // The variable movies represents your JSON object
   $scope.selectedMovie=$scope.movies[0]; // Assume that the first movie is selected by 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>

Answer 5

Answer №3

JavaScript

angular.module('myApp', [])

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


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


  },
  function(error){
    console.error('Error', error);
  })

}]);

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>

Answer 6

JavaScript

angular.module('myApp', [])

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


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


  },
  function(error){
    console.error('Error', error);
  })

}]);

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>

Answer 7

Answer №4

Angular Controller Code:

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

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

        $scope.movies = {
            movieList: [
                {
                    id: 1,
                    name: "The Matrix",
                    format: "DVD",
                    rate: 8,
                    price: 3
                },
                {
                    id: 2,
                    name: "Inception",
                    format: "Blu-Ray",
                    rate: 9,
                    price: 5
                },
                {
                    id: 3,
                    name: "Pulp Fiction",
                    format: "DVD",
                    rate: 7,
                    price: 4
                }
            ]
        }

        $scope.selectMovie = function(movie) {
            $scope.selectedMovie = movie;
        }

    }])

HTML Structure:

<html ng-app="movieApp">

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


    <body ng-controller="MovieController" >
        <h1 style="text-align:center">Movie Rentals</h1>

        <div ng-repeat="movie in movies.movieList">
            <button ng-click="selectMovie(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>
    </body>

</html>

Live demo available here

Answer 8

Angular Controller Code:

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

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

        $scope.movies = {
            movieList: [
                {
                    id: 1,
                    name: "The Matrix",
                    format: "DVD",
                    rate: 8,
                    price: 3
                },
                {
                    id: 2,
                    name: "Inception",
                    format: "Blu-Ray",
                    rate: 9,
                    price: 5
                },
                {
                    id: 3,
                    name: "Pulp Fiction",
                    format: "DVD",
                    rate: 7,
                    price: 4
                }
            ]
        }

        $scope.selectMovie = function(movie) {
            $scope.selectedMovie = movie;
        }

    }])

HTML Structure:

<html ng-app="movieApp">

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


    <body ng-controller="MovieController" >
        <h1 style="text-align:center">Movie Rentals</h1>

        <div ng-repeat="movie in movies.movieList">
            <button ng-click="selectMovie(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>
    </body>

</html>

Live demo available here

Answer 9

Answer №5

Here is a sample code snippet that meets your requirements: Sample Code

Modify the html as follows:

<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>

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

Answer 10

Here is a sample code snippet that meets your requirements: Sample Code

Modify the html as follows:

<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>

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

Answer 11

Answer №6

To display movies on your front-end, simply define the movies object within your controller. To embed the movies JSON directly in your controller, it would look 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
    }];
}]);

I've converted movies to an array and removed the movie property inside the object for proper functioning of ng-repeat.

If you prefer to have the movies JSON in a separate file, you can load it using the $http service as @KuZon mentioned.

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

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

You can view both methods in this Plunkr.

Lastly, remember to use ng-click on your buttons to select the movie. For example:

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

And in your controller:

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

Answer 12

To display movies on your front-end, simply define the movies object within your controller. To embed the movies JSON directly in your controller, it would look 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
    }];
}]);

I've converted movies to an array and removed the movie property inside the object for proper functioning of ng-repeat.

If you prefer to have the movies JSON in a separate file, you can load it using the $http service as @KuZon mentioned.

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

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

You can view both methods in this Plunkr.

Lastly, remember to use ng-click on your buttons to select the movie. For example:

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

And in your controller:

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

Utilizing AngularJS for Managing JSON Data

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Mastering the use of gl Scissor is essential for effectively implementing popups in your

Ways to optimize the performance of my android application

When running the command "npm start," an error occurs stating: Plugin/Preset files are prohibited from exporting objects and can only export functions

What benefits could you derive from utilizing an interface to generate a fresh Array? (Pulumi)

"Implement a feature that allows for infinite scrolling triggered by the height of

Troubleshooting the JsonValueProvider malfunction in ASP.NET MVC3

Retrieve data from a variable labeled as a string containing JSON

Passing dynamic props to Vue mixin: a guide

Tips for automatically closing SweetAlert after an AJAX request finishes

What is the proper way to utilize $location within a standard function?

Tips for generating various series using dx-Chartjs

Interacting with server-side data using JQuery's $.ajax method and handling JSON

Supply mandatory argument along with varying arguments to the function

An offbeat symbol discovered when using conditional rendering

Combining arrays to append to an array already in place

Sorting through an array of objects based on TypeScript's union types

Updating a class within an AngularJS directive: A step-by-step guide

The integration between Mongoose and GraphQL does not support populating models

Extract JSON from the response data in the success callback of a JQuery.ajax

Vietnamese special characters are not supported in JSON on Windows Phone 8.1 when using IBM Mobile First