从JSON获取数据并用angular过滤

Question

我需要使用angular.js开发一个简单的应用程序，但由于不习惯使用javascript，因此遇到了很多麻烦。可以根据JSON得出该JSON中有多少系列，电影和游戏。 这是JSON（您可以看到我在说的Type属性）：

{
    "Search": [
        {
            "Title": "The Wire",
            "Year": "2002–2008",
            "imdbID": "tt0306414",
            "Type": "series",
            "Poster": "http://ia.media-imdb.com/images/M/MV5BNjc1NzYwODEyMV5BMl5BanBnXkFtZTcwNTcxMzU1MQ@@._V1_SX300.jpg"
        },
        {
            "Title": "Wire in the Blood",
            "Year": "2002–",
            "imdbID": "tt0337792",
            "Type": "series",
            "Poster": "http://ia.media-imdb.com/images/M/MV5BMTg2NDc3ODI4MF5BMl5BanBnXkFtZTcwOTM3OTIzMQ@@._V1_SX300.jpg"
        },
        {
            "Title": "Thru the Wire",
            "Year": "1987",
            "imdbID": "tt0094143",
            "Type": "movie",
            "Poster": "N/A"
        },
        {
            "Title": "The Wire",
            "Year": "1997–1998",
            "imdbID": "tt0960700",
            "Type": "series",
            "Poster": "N/A"
        },
        {
            "Title": "Over the Wire",
            "Year": "1996",
            "imdbID": "tt0114071",
            "Type": "movie",
            "Poster": "http://ia.media-imdb.com/images/M/MV5BMTY5MjE1NDQ0MF5BMl5BanBnXkFtZTcwODMyNjUxMQ@@._V1_SX300.jpg"
        },
        {
            "Title": "The Wire: The Musical",
            "Year": "2012",
            "imdbID": "tt2191222",
            "Type": "movie",
            "Poster": "N/A"
        },
        {
            "Title": "The Wire: The Chronicles",
            "Year": "2007–",
            "imdbID": "tt1168599",
            "Type": "series",
            "Poster": "N/A"
        },
        {
            "Title": "Hold the Wire",
            "Year": "1936",
            "imdbID": "tt0027756",
            "Type": "movie",
            "Poster": "N/A"
        },
        {
            "Title": "Tapping the Wire",
            "Year": "2007",
            "imdbID": "tt1075404",
            "Type": "movie",
            "Poster": "N/A"
        },
        {
            "Title": "Wind in the Wire",
            "Year": "1993",
            "imdbID": "tt0324568",
            "Type": "movie",
            "Poster": "N/A"
        }
    ]
}

例如，当我键入“ The wire”时，我应该获得4个系列，0个游戏和6个电影。 我通过调用IMDB API来做到这一点，然后访问type元素并读取它是电影，游戏还是连续剧。 到目前为止，我已经编写了这段代码，但是它具有一些怪异的行为：

<html>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

    <body>
        <div ng-app="myApp" ng-controller="customersCtrl">TV Series:
            <input type="text" ng-model="seriesName">
            <br>
            <br>Series Name: {{seriesName}}
            <input type="submit" ng-click="search(seriesName)" value="Search" />
            <ul>
                <li ng-repeat="x in names | filter:isActive"></li>
            </ul>
            <br>Series:{{series}}
            <br>
            <br>Game:{{games}}
            <br>
            <br>Movie:{{movies}}
            <br>
        </div>

       <script>

       var app = angular.module('myApp', []);
       app.controller('customersCtrl', function ($scope, $http) {
           $scope.series = 0;
           $scope.movies = 0;
           $scope.games = 0;
           $scope.search = function (value) {

               $http.get("http://www.omdbapi.com/?s=" + value).success(function (response) {
                   $scope.names = response.Search;
               });

               $scope.isActive = function (x) {
                   if (x.Type === "movie") {
                       $scope.movies = $scope.movies + 1;
                   } else if (x.Type === "game") {
                       $scope.games = $scope.games + 1;
                   } else if (x.Type === "series") {
                       $scope.series = $scope.series + 1;
                   }
                   return false;
               };
           };
       });

       </script>

我遇到的第一个问题是，当我单击“搜索”时，我得到的是44系列而不是4部电影，而不是66部电影而不是6部电影。没有我点击搜索按钮的电话号码。

Answer 1

您将获得44和66，因为您要附加字符串而不是添加这些数字。 在Javascript中，+运算符还会连接字符串，因此'foo'+ 1 ='foo1'。 总和的两侧之一是字符串，而不是整数。

另外，如果您想在单击搜索按钮时仅搜索一次，则不会将$ scope.isActive函数嵌套在$ scope.search函数内。 只需使搜索功能设置$ scope.names变量，如果您还想设置电影游戏和系列计数器，就可以在成功之后立即通过迭代响应来进行设置（我建议像这样的例子使用lodash）。

搜索功能将所有数据正确加载到示波器上之后，您就可以操作或呈现它。 关于isActive函数，我不确定您要在此实现什么。 但我认为您不需要它。

编辑：

app.controller('customersCtrl', function ($scope, $http) {
$scope.series = 0;
$scope.movies = 0;
$scope.games = 0;
$scope.search = function (value) {
$http.get("http://www.omdbapi.com/?s=" + value).success(function (response) {
    $scope.names = response.Search;
    $scope.movies = _.filter($scope.names,function(entry){
        return entry.Type === 'movie'
    }).length;
    $scope.games = _.filter($scope.names,function(entry){
        return entry.Type === 'game'
    }).length;
    $scope.series = _.filter($scope.names,function(entry){
        return entry.Type === 'series'
    }).length;
});
}

在那里有了jsFiddle ，我该怎么做。

Answer 2

似乎您仍然需要学习很多有关角度的知识，以及角度如何与DOM交互以及每个角度分量的用途是什么。 我建议您仔细阅读过滤器和其他角度部分（例如服务和工厂）的正确用法。

同样，在使用JS时学习一些异步编程技能也不会受到伤害。 使用诺言可以使您的应用程序性能更好，并使代码更简洁。

以下html和js代码段应为您清除许多细节：

 <div ng-app="myApp" ng-controller="customersCtrl">Query : <input type="text" ng-model="seriesName"> <input type="submit" ng-click="search(seriesName)" value="Search" /> <br /><br /> <div ng-repeat="entry in data">{{entry}}</div> <br /> <br/>Series:{{series}} <br/> <br/>Game:{{games}} <br/> <br/>Movie:{{movies}} <br/>

 var app = angular.module('myApp', []); app.controller('customersCtrl', function ($scope, $http, $q) { $scope.series = 0; $scope.movies = 0; $scope.games = 0; //Use this as a service/factory instead it is not recommended to have this in a controller var get = function (search) { var deferred = $q.defer(); $http.get("http://www.omdbapi.com/?s=" + search).success(function (response) { deferred.resolve(response) }); return deferred.promise; }; $scope.search = function (value) { var promise = get(value); promise.then(function (data) { $scope.data = data.Search; $scope.series = 0; $scope.movies = 0; $scope.games = 0; angular.forEach($scope.data, function(datum){ switch(datum.Type) { case 'movie' : $scope.movies += 1; break; case 'series' : $scope.series += 1; break; case 'games' : $scope.games += 1; break; default:break; } }); }); }; });

可以对这段代码进行很多改进，但这应该使您走上正确的道路，并帮助您查看错误。

我没有在编写代码时牢记所有最佳实践或其他标准。 请仅使用此代码查看您出了问题的地方以及可以改进的地方，此代码不适合在任何生产/开发环境中使用。

有几个好的角度源可以教您所有需要正确使用角度的奇妙而强大的功能的知识。 希望我的快速而肮脏的答案能帮助您。

从JSON获取数据并用angular过滤

问题描述

2 个解决方案

解决方案1
2 2015-10-26 17:43:08

解决方案2
1 已采纳 2015-10-26 18:58:25

从JSON获取数据并用angular过滤

问题描述

2 个解决方案

解决方案1 2 2015-10-26 17:43:08

解决方案2 1 已采纳 2015-10-26 18:58:25

解决方案1
2 2015-10-26 17:43:08

解决方案2
1 已采纳 2015-10-26 18:58:25