Question

我正在学习angularJS，我在JSON文件中无法访问我想要的对象的值。现在，我在互联网上搜索了答案，但我得到的都是非常简单的例子，在这种情况下我无法应用。

以下是我尝试的屏幕截图。唯一能解决的问题是当我访问一个对象数组时，但是当我想从一个不在数组中的对象访问值时，我无法正确地执行它。

我想访问和显示对象＆＃34; main＆＃34;：

中的值

{"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个空div，所以我猜这也算作失败。

我非常感谢一些帮助。

编辑：

这是我的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

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，请打破并查看您获得的内容。

Answer 2

在您的情况下，您不需要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>

AngularJS访问复杂天气JSON中的值

2 个答案: