How to get information from too array json in AngularJS

Question

I have a JSON file that has 2 arrays containing some data that I'd like to access on my AngularJS website. Now what I want is to get only one object from the 2 arrays.

JSON data

[
  {
    "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"
        }
      }
    ]
  }
]

Controller Code

 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,
                     };
                 }
             })
 })
 }

and loop inside this array using ng-repeat , but its not working for me , this is code:

HTML

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

I get this error: Error: yData is not defined Any help please ?

can you log on your browser the data object by console.log(data) to check if the right structure for data — Ahmed Mostafa
– Ahmed Mostafa, Commented Jan 12, 2017 at 13:37
yData should be declared as either $scope.yData = data.HourlyForecasts; or var yData = data.HourlyForecasts; — jbrown
– jbrown, Commented Jan 12, 2017 at 13:46

georgeawg · Accepted Answer · 2017-01-12 19:01:37Z

0

Use yData = data[0].HourlyForecasts;. The JSON starts with [ { "DailyForecasts": [ which means it is an array of objects.

work fine thanks , what about the object day inside HourlyForecasts when run get yData[i].day is undefined

see my short code

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, };
}

All I see is a missing dot ".":

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

Also be sure to declare yday as a var:

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

Without a var declaration, it will polute global namespace.

edited Jan 12, 2017 at 19:01

answered Jan 12, 2017 at 17:14

georgeawg

49k13 gold badges77 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

aligassan Over a year ago

work fine thanks , what about the object day inside HourlyForecasts ! , when i try to do like this yData = data[0].HourlyForecasts.day; and when run get yData[i].day is undefined

aligassan Over a year ago

see my short code

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,  											};}

Manikandan Velayutham · Accepted Answer · 2017-01-12 13:47:53Z

0

Try this.

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>

answered Jan 12, 2017 at 13:47

Manikandan Velayutham

2,2281 gold badge17 silver badges22 bronze badges

1 Comment

aligassan Over a year ago

Error: i is undefined

Collectives™ on Stack Overflow

How to get information from too array json in AngularJS

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related