Update view when api get data in Angularjs

Question

So, i have a little problem. I made a tiny webapp that uses the omdb api. The thing is this that when i type in the movie that i'm searching for then press the search button, the view should change to the result.html view and show the data i got from the api.

The api works fine. I got the data to display, but that was in my index.html. Now i have splitted the files by using ng-routes

I can provide you the whole project if you wanna look at it. Maybe i can upload it to a online editor somewhere?

This is my app.js

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

myApp.config(['$routeProvider', function ($routeProvider) {
  $routeProvider.
  when('/home', {
    templateUrl: 'views/home.html',
    controller: 'filmController'
  }).
  when('/result', {
    templateUrl: 'views/result.html',
    controller: 'filmController'
  }).otherwise({
    redirectTo: '/home'
  })
}]);


myApp.controller("filmController", function filmController($scope, $http, $window) {
  $scope.getData = function () {
    var movieTitle = document.getElementById("filmName").value;

    var binding = document.getElementsByClassName("ng-binding");

    $http
      .get("http://www.omdbapi.com/?t=" + movieTitle + "&apikey=526345a6")
      .then(function (response) {
        var data = response.data;

        if (data.Error) {
          alert("Film inte funnen");
          return false;
        }

        for (let key in data) {
          if (data.hasOwnProperty(key)) {
            let element = data[key];
            if (element === "N/A") {
              data[key] = "Inget hittat";
              if (key === "Poster") {
                $scope.post = "Ingen poster hittad";
              }
            }
            $scope.url = data;
          }
        }

        if (data.Ratings.length === 0) {
          $scope.rate = "Ingen utmärkelse/er hittad";
        }
        // This api data is printed to the console on the index.html view, i want it in the result view...
        console.log(data);

      });
  };
});

This is my index.html

<body>
  <div class="main-content">
    <!-- <div class="container">
      <div class="row">
        <div ng-controller="MyController">
            <div ng-repeat="item in larare" class="col-lg-12">
              <div class="card">
                <img ng-src="/images/{{item.shortname}}.jpg" alt="Bild på {{item.name}}" class="card-img-top">
                <div class="card-body">
                  <h3 class="card-title">{{item.name}}</h3>
                  <p class="card-text">{{item.reknown}}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div> -->

    <header ng-include="'header.html'"></header>

    <main ng-view></main>

    </div>


  </div>
  <script>
    var elem = document.getElementsByTagName("body")[0];
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
      console.log("Nu");
    } else {
      console.log("Error");
    }

    function updateSite(event) {
      window.applicationCache.swapCache();
    }
    window.applicationCache.addEventListener('updateready',
      updateSite, false);
  </script>

  <script src="./js/formvalidation.js"></script>
</body>

</htm>

And my result view

<div class="show container" ng-show="url.Title">
<div class="poster">
  <!-- <img ng-src="{{ url.Poster }}"  alt="" /> -->
  <img ng-src="{{ url.Poster == 'Inget hittat' ? './images/image_not_found.png' : url.Poster }}">
  <p class="text-dark">{{ post }}</p>
</div>
<h2 class="text-dark">{{ url.Title | uppercase}}</h2>
<div class="movie-info">
  <p class="text-dark">
    <strong>Från:</strong> {{ url.Year }}</p>
  <p class="text-dark">
    <strong>Rating:</strong> {{ url.Rated }}</p>
  <p class="text-dark">
    <strong>Utgiven:</strong> {{ url.Released }}</p>
  <p class="text-dark">
    <strong>Längd:</strong> {{ url.Runtime }}</p>
</div>
<p class="text-dark">
  <strong>Skådespelare:</strong> {{ url.Actors }}</p>
<p class="text-dark">
  <strong>Regissör:</strong> {{ url.Director }}</p>
<p class="text-dark">
  <strong>Utmärkelser:</strong> {{ url.Awards }}</p>
<p class="text-dark">
  <strong>Handling: </strong> {{ url.Plot }}</p>
<h4 class="text-dark">
  <strong>Utmärkelser</strong>
</h4>
<p class="text-dark ">{{ rate }}</p>
<div ng-repeat="rating in url.Ratings | orderBy: '-Value'">
  <p class="text-dark">
    <strong>{{ rating.Source + ': ' + rating.Value }}</strong>
  </p>
</div>

This is my home view

<section class="text-white">
<img src="./images/background.jpg" alt="Bild på poster från Frankenstein filmen" class="bg-image">
<div class="main container align-middle">
  <div class="row text-center justify-content-center section-intro">
    <div class="col-6 mb-5">
      <h1>Filmtipset</h1>
      <h5>Sök efter dina favortfilmer</h5>
    </div>
  </div>

  <form ng-submit="getData()">
    <div class="inputSearch mx-auto">
      <div class="row justify-content-center">
        <div class="col-8">
          <div class="form-group">
            <label for="filmName">Film</label>
            <input class="form-control" type="text" name="filmName" id="filmName" placeholder="Ex. Armageddon" autofocus>
          </div>

          <input type="submit" class="btn btn-primary btn-lg btn-block btn-info mt-5" onclick="validateForm()" ng-click="'#!/result'">
        </div>
      </div>
  </form>

Just a tip: You are mixing up a lot of different javascript with angularjs. Try to make everything in angularjs. For example document.getElementById("filmName").value, why not use NgModel? And for the validation made on onclick on the submit button. How does that get synced with the scope? — Marcus Höglund
– Marcus Höglund, Commented Apr 10, 2018 at 19:35
You are totally right. I've been "cheating", but the other way around. I've only could use angularjs power instead. I will do a big refactor on this. Thanks for the heads up. :) — Lars Jönsson
– Lars Jönsson, Commented Apr 11, 2018 at 6:30

Tyler · Accepted Answer · 2018-04-10 19:37:30Z

Just a few notes before we break down the issue you are seeing. It seems like you aren't using angularjs to its full potential. Using a mixture of jquery and angularjs is not best practice and can make debugging very difficult. I would recommend making movieTitle an ng-model, as well as using angularjs's built in form validation. This will allow you to access the movieTitle easily in your controller as well as take advantage of angular's built in form controller and actions.

As for getting the data to your other page, I would add a second controller for that page, then from your filmController, you can pass the movie title as a route param when changing views. In your resultController, you can get the movie title from the route param and then do your api call while initializing the result page/controller.

In your home.html file, we will add ng-model to the input to be more angularjs friendly. Now we can access movieTitle in the controller with $scope.movieTitle. I am also changing the method that should get run on submit to the search() method I have added to the filmController.

home.html

<form ng-submit="search()">
// ... your other html here
<input class="form-control" type="text" name="filmName" id="filmName" ng-model="movieTitle" placeholder="Ex. Armageddon" autofocus>

In your filmController, I would add $location and move the getData() method to a resultController. We will now call search() on form submit, then use $location to switch views to your result view, attaching the movie title as a route param so we can access it in the resultController.

filmController.js

myApp.controller("filmController", function filmController($scope, $http, $location) {
    // ... other code you have

    // this will be what gets called after the user types a movie title
    $scope.search = function () {
        var title = $scope.movieTitle; // or using jquery(not recommended)
        // this will change location and will produce
        // the url: http://[yoursite]/result?movieTitle=title
        $location.path('/result').search({movieTitle: title});
    }
 });

In your newly created resultController, we will get that route param and use it to search for the data.

resultController.js

myApp.controller("resultController", function resultController($scope, $http, $routeParams) {

    // the getData method moved to this controller
    $scope.getData = function (movieTitle) {
        $http
            .get("http://www.omdbapi.com/?t=" + movieTitle + "&apikey=526345a6")
        // the rest of your code for getData here
    };

    // I like to make an init method to make it clear what we are initializing
    $scope.init = function () {
        // this will get the movieTitle from the /result?movieTitle=title part of your url
        var movieTitle = $routeParams['movieTitle'];
        // now we call the method you have that uses the omdb api
        // just modify it to accept the movie title as a param rather than finding it in the html
        $scope.getData(movieTitle);
     }
     // run init method
     $scope.init();
});

Finally, you will want to update your app config to have your result route use the resultController we added instead of the filmController.

Tyler, im very glad that you helped me! It's so much cleaner now. I appreciate it! I understand the code and all what happens in the background. But i guess i have to learn some more angularjs routes and stuff, and dont use vanilla js for validation etc.
@LarsJönsson If my answer was able to help you, can you accept it as the answer.
There you go. Thank you so much for your help and fast answer.

Collectives™ on Stack Overflow

Update view when api get data in Angularjs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related