如何从AngularJS中的数组json获取信息

时间:2017-01-12 13:32:09

标签: javascript angularjs arrays json

我有一个JSON文件,其中包含2个数组,其中包含我想在AngularJS网站上访问的一些数据。现在我想要的是从2个数组中只获取一个对象。

JSON数据

[
  {
    "DailyForecasts": [
      {
        "key": "32.48,44.46",
        "class": "forecast",
        "validDate": 1484236800,
        "maxTemp": 17,
        "minTemp": 3,
        "precip_type": "rain",
        "day": {
          "humid": 34,
          "wSpeed": 20,
          "wDir": 297,
          "pop": 0,
          "uv": 2,
          "icon": 34,
          "wDirText": "غرب-شمال غ",
          "phrase": "مشمس بصورة كلية",
          "bluntPhrase": "",
          "precip_type": "rain",
          "snwAccumPhrase": "",
          "snwAccumPhraseTerse": "",
          "extQual": "",
          "weatherCode": "3400"
        },
        "night": {
          "humid": 64,
          "wSpeed": 20,
          "wDir": 297,
          "pop": 0,
          "uv": 0,
          "icon": 33,
          "wDirText": "غرب-شمال غ",
          "phrase": "صافي بصورة كلية",
          "bluntPhrase": "",
          "precip_type": "precip",
          "snwAccumPhrase": "",
          "snwAccumPhraseTerse": "",
          "extQual": "",
          "weatherCode": "3300"
        }
      },
      {
        "key": "32.48,44.46",
        "class": "forecast",
        "validDate": 1484323200,
        "maxTemp": 17,
        "minTemp": 5,
        "precip_type": "rain",
        "day": {
          "humid": 48,
          "wSpeed": 14,
          "wDir": 287,
          "pop": 0,
          "uv": 3,
          "icon": 32,
          "wDirText": "غرب-شمال غ",
          "phrase": "مشمس",
          "bluntPhrase": "",
          "precip_type": "rain",
          "snwAccumPhrase": "",
          "snwAccumPhraseTerse": "",
          "extQual": "",
          "weatherCode": "3200"
        },
        "night": {
          "humid": 67,
          "wSpeed": 14,
          "wDir": 287,
          "pop": 10,
          "uv": 0,
          "icon": 31,
          "wDirText": "غرب-شمال غ",
          "phrase": "صافي",
          "bluntPhrase": "",
          "precip_type": "rain",
          "snwAccumPhrase": "",
          "snwAccumPhraseTerse": "",
          "extQual": "",
          "weatherCode": "3100"
        }
      }
    ]
  }
]

控制器代码

 app.controller('Hillahctlr', function($scope, $http, wind, arrivecss, windname, icons) {
     $scope.wind_dir = wind;
     $scope.icons = icons;
     $scope.arrivecss = arrivecss;
     $scope.windname = windname;
     var service_url = "/key=e88d1560-a740-102c-bafd-001321203584&units=m&locale=ar&cb=JSON_CALLBACK";
     $http.jsonp(service_url)
         .success(
             function(data) {
                 console.log(data);
                 yData = data.HourlyForecasts;
                 $scope.ali = [];
                 for (var i = 0; i < 9; i++)
                 {
                     $scope.ali[i] = {
                         dayes: yData[i].temp,
                     };
                 }
             })
 })
 }

并使用ng-repeat在此数组中循环,但它对我不起作用,这是代码:

HTML

<div class="ForecastArea-Day Last weatherteble" ng-repeat="alis in dayes">
   {{alis.dayes}}
</div>

我收到此错误:Error: yData is not defined有任何帮助吗?

2 个答案:

答案 0 :(得分:0)

试试这个。

var alis = [];

 alis = {dayes: yData[i].temp,};
 $scope.ali = ali;

<div class="ForecastArea-Day Last weatherteble" ng-repeat="alis in ali.dayes"> 
{{alis.day}}
</div>

答案 1 :(得分:0)

使用yData = data[0].HourlyForecasts;。 JSON以[ { "DailyForecasts": [开头,这意味着它是一个对象数组。

  

工作得很好,谢谢,HourlyForecasts内的对象日怎么样?   运行时yData[i].dayundefined

     

查看我的简短代码

yday = data[0].DailyForecasts;
$scope.daily = [];
for(var i=0; i<9; i++) {
    $scope.daily[i] = {maxTemp: yData[i].maxTemp,
                       minTemp: yData[i].minTemp,
                       validDate: yData[i].validDate,
                       icon: yData[i]day.icon, };
}

我看到的只是一个缺失的点“.”:

                   //    icon: yData[i]day.icon, };
                       icon: yData[i].day.icon, };
                   //                ^ --- put a dot here

另外请务必将yday声明为var:

 //yday = data[0].DailyForecasts;
 var yday = data[0].DailyForecasts;

如果没有var声明,它将对全局命名空间进行规范。