Reputation: 44

AngularJS two way data binding input matching json file

I am having issues with outputting data automatically using angularjs. One of the cool features of angular is the two way data binding. I am not able to bind the input with a json file. What I am trying to do is if user input matches a key, output key, automatically, using two way data binding. And when user deletes his selection, the output or view also changes. I am able to get the correct results but using a button ng-click directive. Any help would be appreciated.

What I am trying to do: 1.if input matches link which contains json information, output that information automatically using two way data binding. No buttons should be clicked in order to get information. 3.when I delete user input, output data will also delete.

  <!DOCTYPE html>
  <html lang="en" ng-app="app">
  <head>
  <script    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<meta charset="UTF-8">
<title>Pokedex</title>
<!--Angular STYLE SHEET-->
<link rel="stylesheet" href="Content/angular-material.min.css" />



 </head>
<body ng-controller="ctrl">
<md-toolbar class="md-padding">
    <div class="md-toolbar-tools">
        <h1 class="md-flex"><strong> Angular DM</strong></h1>
    </div>
    <md-nav-bar nav-bar-aria-label="navigation links">
        <a href="index.html">Movie Database</a>
        <a href="input_Control.html">Pokedex</a>
    </md-nav-bar>
    <!--INPUT-->


            <input ng-model="search" type="text" placeholder="Enter Pokemon Name" ng-click="deleting()">
            <button ng-click="findValue(search)">Search</button>
            <span> {{search | lowercase}}</span>


    <div>
        <table>
            <tr>
                <th>No.</th>
                <th>Name</th>
                <th>Image</th>
            </tr>
            <tr ng-repeat="x in results">
                <td></td>
                <td ng-model="key">
                    {{ $index+1 + x.Name | lowercase}}
                </td>
                <td>
                    <img ng-model="image" ng-src="{{x.Image}}">
                </td>
            </tr>
        </table>
    </div>
    <script>
        var app = angular.module('app', []);
        app.controller('ctrl', function ($scope, $http) {
            $http.get("https://raw.githubusercontent.com/dmedina0217/pokedex/master/pokemon-images.json").then(function (response) {
                $scope.images = response.data;
                $scope.results = [];
                $scope.findValue = function (search) {

                    angular.forEach($scope.images, function (value, key) {
                        if (key === search) {
                            $scope.results.push({ Name: key, Image: value }).$filter(lowercase);

                        }
                    });
                };
                $scope.deleting = function () {
                    $scope.search = null;

                }
            });


        });
    </script>
    <!-- Angular Material Script START-->
    <script src="scripts/angular.min.js"></script>
    <script src="scripts/angular-animate.min.js"></script>
    <script src="scripts/angular-aria.min.js"></script>
    <script src="scripts/angular-messages.min.js"></script>
    <script src="scripts/angular-material/angular-material.min.js"></script>
    <!-- Angular Material Script END-->

Upvotes: 0

Answers (2)

Deepanjan

Reputation: 649

Working perfectly according to your requirement. The other answer given by @yourrock is just a filter over the set of json, its not two way binding.

 <!DOCTYPE html>
<html lang="en" ng-app="app">

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
  <meta charset="UTF-8">
  <title>Pokedex</title>



</head>

<body ng-controller="ctrl">
  <md-toolbar class="md-padding">
    <div class="md-toolbar-tools">
      <h1 class="md-flex"><strong> Angular DM</strong></h1>
    </div>
    <md-nav-bar nav-bar-aria-label="navigation links">
      <a href="index.html">Movie Database</a>
      <a href="input_Control.html">Pokedex</a>
    </md-nav-bar>
    <!--INPUT-->


    <input ng-model="search" type="text" placeholder="Enter Pokemon Name" data-ng-change="findValue(search)" ng-keydown="removeTagOnBackspace($event)"  ng-click="deleting()">
    <!--   <button ng-change="findValue(search)">Search</button> -->
    <span> {{search | lowercase}}</span>


    <div>
      <table>
        <tr>
          <th>No.</th>
          <th>Name</th>
          <th>Image</th>
        </tr>
        <tr ng-repeat="x in results">
          <td></td>
          <td ng-model="key">
            {{  x.Name | lowercase}}
          </td>
          <td>
            <img ng-model="value" ng-src="{{x.Image}}">
          </td>
        </tr>
      </table>
    </div>

    <script>
      var app = angular.module('app', []);
      app.controller('ctrl', function($scope, $http) {



      $scope.getResult=function(){
        $http.get("https://raw.githubusercontent.com/dmedina0217/pokedex/master/pokemon-images.json").then(function(response) {
          $scope.images = response.data;
          console.log($scope.images)

          $scope.results = [];



          $scope.findValue = function(search) {

            angular.forEach($scope.images, function(value, key) {
              debugger
              if (key == search) {
                $scope.results.push({
                  Name: key,
                  Image: value
                }).$filter(lowercase);

              }


            });
            console.log($scope.results)
          };
          $scope.removeTagOnBackspace = function (event) {
    if (event.keyCode === 8) {
    $scope.results=[];

        console.log('here!');
    }
};
          $scope.deleting = function() {
            $scope.search = null;

          }
        });

}
$scope.getResult();
      });
    </script>
    </body>
    </html>

Upvotes: 0

oakgun

Reputation: 170

There are a few things I would like to note here. First, the plunker: https://plnkr.co/edit/IgcuE2fKlqPcT9ZV9GQ5

Your script/css references were pointing to relative paths, so I just grabbed the latest versions of the libraries you used from plunker. What you see might not be what you wanted to see but that's the best you get from what you provided.
The response that contains the Pokémon list is an object, not an array. You can iterate over an object with ng-repeat, but you cannot use the filter directive on objects. Therefore, I modified your findValue method so that it creates a new array which will be used with ng-repeat. I removed the if (key === search) check though, as you can use the filter: search directive to filter the array. This search will be instantenous and will be performed as soon as the value in the input box changes.
ng-model is only bound to input, select, and textarea so there is no point having them on <td>. See here: https://docs.angularjs.org/api/ng/directive/ngModel
I'm not sure what you meant with #3. (#2 is missing by the way) If you want to empty the results array, just set $scope.results = [] inside ng-click method and you will be good to go.

Upvotes: 1

AngularJS two way data binding input matching json file

Answers (2)

Related Questions