I've been diving into learning angularJS and have hit a roadblock when it comes to extracting values from specific objects in a JSON file. Despite searching online for solutions, all I've found are basic examples that don't quite fit my current scenario.
Here's an overview of my attempts so far. I've managed to successfully access values from an array of objects, but when it comes to retrieving data from a standalone object like "main," I've struggled to get it right.
My goal is to specifically access and display the values from the "main" object:
{"temp":293.01,"pressure":1019,"humidity":60,"temp_min":290.15,"temp_max":296.15}
Take a look at the JSON file below:
{
"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...
}
The following three code snippets were unsuccessful:
<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>
The last attempt did manage to display the desired information in a div, but it also rendered 10 empty divs along with it, which can be considered a failure as well.
I would greatly appreciate any assistance on this challenge.
Edit:
Below is my JavaScript file code:
// 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.';
});
I've deployed the app online for practice purposes: