We Keep Coding

Query in looping through JSON data set in getting front-end output

I am using this JSON data and I am suppoose to get the output as the first line will contain "EPL-2015". The second as "Match Day 1". The third line as "Date" and the fourth line as "Team1 VS Team2". But I am getting only correct output in line 1 and I am not getting rest of the outputs. Please help me in getting the rest.I think I am doing wrong in looping through the data of JSON.
var myApp = angular.module('futsalApp', []);
myApp.controller('futsalController', function($scope) {
$scope.fixtures =
{
"name": "EPL-2015",
"rounds":
[
{
"name": "Match Day 1",
"matches":
[
{
"date": "2015-08-08",
"team1":
{
"key": "manutd",
"name": "Manchester United",
"code": "MUN"
},
"team2":
{
"key": "tottenham",
"name": "Tottenham Hotspur",
"code": "TOT"
},
"score1": 1,
"score2": 0
},
{
"date": "2015-08-08",
"team1":
{
"key": "bournemouth",
"name": "Bournemouth",
"code": "BOU"
},
"team2":
{
"key": "astonvilla",
"name": "Aston Villa",
"code": "AVL"
},
"score1": 0,
"score2": 1
}
]
}
]
}
})
.
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="fixtures-first" ng-repeat="fix in fixtures">
<a>
<h2 class="match-title"> {{fixtures.name}} </h2>
<p class="match-day"> {{fixtures.rounds.name}} </p>
<p class="match-day"> {{fixtures.rounds.matches.date}} </p>
</a>
</div>
</div>
</div>

Here are the problems. In this line:
<div class="fixtures-first" ng-repeat="fix in fixtures">
...you're not setting your loop correctly. fixtures is a Javascript object, not an array, so you're not looping the way you want. You also never use fix for anything, so I think you've misunderstood how to use ng-repeat.
What you probably mean to do is repeat over your matches array, which is an actual array. Below, note that fixtures.rounds[0] is the first element of your rounds array.
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="fixtures-first" ng-repeat="match in fixtures.rounds[0].matches">
<a>
<h2 class="match-title"> {{fixtures.name}} </h2>
<p class="round-name"> {{fixtures.round[0].name}} </p>
<p class="match-day"> {{match.date}} </p>
</a>
</div>
</div>
</div>

Angular 2 Reactive Form with checkboxes

Recently I've been trying to figure out how those Reactive Forms works. Basic examples (no nesting etc.) are understandable however if I have a form structure like this with checkboxes:
{
"username": "",
"damnIt": "",
"checkboxes": [
{
"checked": false,
"name": "Checked1",
"value": 10
},
{
"checked": false,
"name": "Checked1",
"value": 11
},
{
"checked": false,
"name": "Checked1",
"value": 12
}
]
}
How should I render it on the template in order to change the "*checked" value (true | false)?

You could do something like this:
<form #theForm="ngForm" (ngSubmit)="submitForm(theForm.value)">
<div *ngFor="let cb of data.checkboxes">
<label>
<input type="checkbox" [name]="cb.name" [(ngModel)]="cb.checked">{{cb.value}}
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<pre>{{data.checkboxes|json}}</pre>
See Plunkr: https://plnkr.co/edit/MpSO21fIJq1DtJoXmE3V?p=preview

How to do ng-repeat on $firebaseArray output with multiple levels?

I am using $firebaseArray for collecting the data from Firebase. Output is as follows:
[
{
"BankAccount": {
"AccountHolder": "Tom Antony",
"AccountNumber": "56767887"
},
"Info": {
"BillingAddress": {
"City": "XYZ",
"State": "ABC"
},
"FullName": "Tom Antony",
"PhoneNumber": "634762347"
},
"$id": "dGUZX5SWi7aP0SNYLYqEiMdCYAS2",
"$priority": null
},
{
"Campaigns": {
"Settings": {
"Active": true
}
}
},
"Info": {
"BillingAddress": {
"City": "ABC",
"State": "DFG"
},
"FullName": "Mario",
"PhoneNumber": "634762347"
},
"$id": "tBqGZ7g6VwNYOWoVy7C1FHKZKFS2",
"$priority": null
}
]
My js is as follows:
const rootRef = firebase.database().ref().child('Users');
$scope.users = $firebaseArray(rootRef);
Each Array element will have different type of objects, but each will have a similar object called Info, which contains a field for FullName I need to apply ng-repeat on this FullName. My implementation is as shown below:
<div ng-repeat="user in users.Info">
<p ng-bind="user.FullName"></p>
</div>
But its not working. What are the mistakes I made here?

You are trying to iterate on the wrong property. You have two objects (user) which each have an Info property that you want the FullName from. You do not have two Info objects. Therefore, you should be iterating over the users, not iterating over users.Info.
Try this instead:
<div ng-repeat="user in users">
<p ng-bind="user.Info.FullName"></p>
</div>
Also, your object you pasted here wasn't valid JSON, you had an extra }.
Full Working example: http://plnkr.co/edit/ryfjhO0c3egHfKnaL9SQ?p=preview

AngularJS accessing values in a complex weather JSON

I am in a process of learning angularJS and I am stuck with accessing the values from the objects I want, in JSON file. Now, I searched the internet for answers, but all I got are really simple examples which I cannot apply in this case.
Here are the screenshots of my tries. The only one that worked out is when I accessed an array of objects, but when I wanted to access values from an object that is not in an array, I could not manage to do it properly.
I want to access and display only values from the object "main":
{"temp":293.01,"pressure":1019,"humidity":60,"temp_min":290.15,"temp_max":296.15}
Here's the JSON file:
{
"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 examples didn't work:
<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 one displayed the wanted info in a div, but it rendered 10 empty divs as well, so I guess that counts as a fail as well.
I would highly appreciate some assistance.
Edit:
This is my JavaScript file:
// 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 uploaded the app on the web for the sake of exercise:
http://www.freegamesarmy.com/horoskop/index.html#/about

Is fiveDay truly an array of those ('those' being the JSON message that you included) or is it just one of those. If the latter then you shouldn't be using an ng-repeat. I'm assuming the former though.
I put your JSON message into a formatter online (this one) so you can make sense of it. Here it is...
{
"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
}
You can see that your first attempt should be the correct one.
One thing you can try is to intercept it in the controller and pick one of the fiveDay values out of the array (using fiveDay[0]) see if it works there in code. If you're using an IDE with debugging, then break and see what you get.

You don't need ngRepeat in your case as the API (http://api.openweathermap.org/data/2.5/weather?q=London,uk) responds with just an object (for current weather I guess). So in your case:
<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>

How do I access JSON objects using Handlebars.js?

I'm creating a basic web app using the Echo Nest API to get used to templating and fetching data from APIs. I was just wondering how I would access the 'artist_name' & 'title' objects inside 'song' from the JSON object and use Handlebars.js to insert this data inside my template? When I do the {{#each songs}} as I've written below, it doesn't work.
Thanks in advance!
PS. Jeanie Tracy does not reflect my music taste. It's just the JSON object that came up when I was testing it!
<main>
<section>
<input type="text" id="genre-name" placeholder="Enter the Genre Here." />
<input type="number" id="bpm" placeholder="Enter the BPM here." id="bpm">
Fetch
</section>
<section id="results">
</section>
</main>
<template id="results-template">
<article>
<header>
{{#each songs}}
<h1>{{ this.artist_name }}</h1> {{/each}}
</template>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="handlebars.js"></script>
<script type="text/javascript">
$('#fetch-albums').on('click', function() {
var genre = $('#genre-name').val();
var bpm = $('#bpm').val();
var source = $('#results-template').html();
var template = Handlebars.compile(source);
$.get('http://developer.echonest.com/api/v4/song/search?api_key=[hidden]&style=' + genre + '&min_danceability=0.65&min_tempo=' + bpm + '&results=5', function(data) {
$('#results').append(template(data));
});
});
</script>
JSON OBJECT
{
"response": {
"status": {
"version": "4.2",
"code": 0,
"message": "Success"
},
"songs": [{
"artist_id": "AR8COOH1187B990D7D",
"id": "SOGMVZZ1393A2A9142",
"artist_name": "Jeanie Tracy",
"title": "I'm Gonna Get You"
}, {
"artist_id": "AR8COOH1187B990D7D",
"id": "SOGMIVN14248BD9E88",
"artist_name": "Jeanie Tracy",
"title": "Feel Like Dancing [Joey Negro Dubbed Out]"
}, {
"artist_id": "AR8COOH1187B990D7D",
"id": "SOIMUFZ1315CD4CDEC",
"artist_name": "Jeanie Tracy",
"title": "Do You Believe In Wonder (Stone & Nick Late Nite Diner Mix)"
}, {
"artist_id": "AR8COOH1187B990D7D",
"id": "SOEQTUW1315CD4FAB2",
"artist_name": "Jeanie Tracy",
"title": "Intro"
}, {
"artist_id": "AR8COOH1187B990D7D",
"id": "SOENYBA12A6D4F46C0",
"artist_name": "Jeanie Tracy",
"title": "Rosabel's Disco Diva Mix"
}]
}
}

Your <article> and <header> don't have closing tags. While the HTML specifications may allow some tags to omit closing (like <td>, afaik), and while some browsers are forgiving enough, I don't know if the Handlebars compiler is the same.
Your songs is still under response. I think it should be {{#each response.songs}}. Also, I think you can go with {{ artist_name }} too.