AngularJS доступ к значениям в сложной погоде JSON

Question

Я участвую в процессе обучения angularJS, и я застрял в доступе к значениям из объектов, которые я хочу, в файле JSON. Теперь я искал в Интернете ответы, но все, что у меня есть, действительно простые примеры, которые я не могу применить в этом случае.

Вот скриншоты моих попыток. Единственное, что получилось, - это когда я обратился к массиву объектов, но когда мне захотелось получить доступ к значениям из объекта, который не находится в массиве, я не смог бы сделать это правильно.

Я хочу, чтобы получить доступ и отображать только значения из объекта "основного":

{"temp":293.01,"pressure":1019,"humidity":60,"temp_min":290.15,"temp_max":296.15} 

Вот файл в формате JSON:

{ 
    "id": 2643743, 
    "name": "London", 
    "cod": 200, 
    "coord": { 
    "lon": -0.13, 
    "lat": 51.51 
    }, 
    "weather": [{ 
    "id": 800, 
    "main": "Clear", 
    "description": "Sky is Clear", 
    "icon": "01n" 
    }], 
    "base": "stations", 
    "main": { 
    "temp": 293.01, 
    "pressure": 1019, 
    "humidity": 60, 
    "temp_min": 290.15, 
    "temp_max": 296.15 
    }, 
    // etc... 
} 

Следующие три примера не работали:

<div> 
    <h1 align="center">Customer List</h1> 
    <div class="forecast"> 
     <div ng-repeat="x in fiveDay"> 
      <div class="first"> 
       <p>{{ x.main.temp }}</p> 
       <p>{{ x.main.pressure }}</p> 
       <p>{{ x.main.humidity }}</p> 
      </div> 
     </div> 
    </div> 
</div> 

<div> 
    <h1 align="center">Customer List</h1> 
    <div class="forecast"> 
     <div ng-repeat="x in fiveDay.main"> 
      <div class="first"> 
       <p>{{ x.temp }}</p> 
       <p>{{ x.pressure }}</p> 
       <p>{{ x.humidity }}</p> 
      </div> 
     </div> 
    </div> 
</div> 

<div> 
    <h1 align="center">Customer List</h1> 
    <div class="forecast"> 
     <div ng-repeat="x in fiveDay"> 
      <div class="first"> 
       <p>{{ x.temp }}</p> 
       <p>{{ x.pressure }}</p> 
       <p>{{ x.humidity }}</p> 
      </div> 
     </div> 
    </div> 
</div> 

Последними отображается разыскиваемой информацией в DIV, но он оказал 10 пустых див, как хорошо, так что я думаю, что считается, что не в состоянии, а также.

Я был бы очень признателен за помощь.

Edit:

Это мой JavaScript файл:

// create the module and name it scotchApp 
     // also include ngRoute for all our routing needs 
    var scotchApp = angular.module('scotchApp', ['ngRoute']); 

    // configure our routes 
    scotchApp.config(function($routeProvider) { 
     $routeProvider 

      // route for the home page 
      .when('/', { 
       templateUrl : 'pages/home.html', 
       controller : 'mainController' 
      }) 

      // route for the about page 
      .when('/about', { 
       templateUrl : 'pages/about.html', 
       controller : 'aboutController' 
      }) 

      // route for the contact page 
      .when('/contact', { 
       templateUrl : 'pages/contact.html', 
       controller : 'contactController' 
      }); 
    }); 



    scotchApp.factory('forecast', ['$http', function($http) { 
    return $http.get('http://api.openweathermap.org/data/2.5/weather?q=London,uk') 
      .success(function(data) { 
       return data; 
      }) 
      .error(function(err) { 
       return err; 
      }); 
}]); 



    // create the controller and inject Angular's $scope 
    scotchApp.controller('mainController', function($scope) { 
     // create a message to display in our view 
     $scope.message = 'Everyone come and see how good I look!'; 
    }); 


    scotchApp.controller('aboutController', ['$scope', 'forecast', function($scope, forecast) { 
    forecast.success(function(data) { 
    $scope.fiveDay = data; 
    }); 
}]); 



    scotchApp.controller('contactController', function($scope) { 
     $scope.message = 'Contact us! JK. This is just a demo.'; 
    }); 

Я загрузил приложение в Интернете для физических упражнений: http://www.freegamesarmy.com/horoskop/index.html#/about

Answer 1

Вам не нужно ngRepeat в вашем случае, поскольку API (http://api.openweathermap.org/data/2.5/weather?q=London,uk) отвечает только объектом (для текущей погоды, я думаю). Поэтому в вашем случае:

<div> 
    <h1 align="center">Customer List</h1> 
    <div class="forecast"> 
     <div> 
      <div class="first"> 
       <p>{{ fiveDay.main.temp }}</p> 
       <p>{{ fiveDay.main.pressure }}</p> 
       <p>{{ fiveDay.main.humidity }}</p> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 2

Is fiveDay действительно массив из них («те, которые были сообщением JSON, которое вы включили), или это только один из них. Если последнее, то вы не должны использовать ng-repeat. Однако я предполагаю, что это был первый. Я разместил ваше сообщение JSON в формате форматирования в Интернете (this one), чтобы вы могли понять это. Вот она ...

{ 
    "coord": { 
     "lon": -0.13, 
     "lat": 51.51 
    }, 
    "weather": [ 
     { 
      "id": 800, 
      "main": "Clear", 
      "description": "Sky is Clear", 
      "icon": "01n" 
     } 
    ], 
    "base": "stations", 
    "main": { 
     "temp": 293.01, 
     "pressure": 1019, 
     "humidity": 60, 
     "temp_min": 290.15, 
     "temp_max": 296.15 
    }, 
    "visibility": 10000, 
    "wind": { 
     "speed": 4.6, 
     "deg": 80 
    }, 
    "clouds": { 
     "all": 0 
    }, 
    "dt": 1438976764, 
    "sys": { 
     "type": 1, 
     "id": 5091, 
     "message": 0.0124, 
     "country": "GB", 
     "sunrise": 1438922043, 
     "sunset": 1438976240 
    }, 
    "id": 2643743, 
    "name": "London", 
    "cod": 200 
} 

Вы можете увидеть, что ваша первая попытка должна быть правильным. Одна вещь, которую вы можете попробовать - перехватить ее в контроллере и выбрать одно из значений пяти дней из массива (используя fiveDay[0]), посмотрите, работает ли он там в коде. Если вы используете IDE с отладкой, тогда перерыв и посмотрите, что вы получаете.