Parsing JSON in JavaScript using for loop - javascript

A] Problem summary:
I have JSON data being returned from python to javascript. I want to go thru the JSON structure and print the data elements in a html table.
B] Code excerpts:
1] JSON being returned from python --
{'data_for_users_city':
'[
{"city":
{"city_name": "Boston",
"country": {"country_name": "United States"}
},
"status": true,
"date_time": {"ctime": "Thu Apr 7 09:38:00 2011", "hour": 9, "isoweekday": 4, "month": 4, "second": 0, "microsecond": 796000, "isocalendar": [2011, 14, 4], "timetuple": [2011, 4, 7, 9, 38, 0, 3, 97, -1], "year": 2011, "epoch": 1302169080.0, "isoformat": "2011-04-07T09:38:00.796000", "day": 7, "minute": 38}
},
]'
}
Note this is a single city, like this there are many city elements in the JSON data.
2] Javascript code that I tried for parsing thru the data-structure and printing data elements in the “tbody” of a pre-ready HTML table “#datatable_for_current_users”
function LoadUsersDatatable(data) {
var tbody = $("#datatable_for_current_users > tbody").html("");
for (var i=0; i < data.length; i++)
{
var city = data.data_for_users_city[i];
var rowText = "<tr class='gradeA'><td>" + city.county.country_name + "</td><td>" + city.city_name + "</td><td>" + city.status + "</td><td>" + city.date_time.ctime + "</td></tr>";
$(rowText).appendTo(tbody);
}
}
Problems i am having the javascript code are :
1] I am unable to find the exact length of the city elements in the "data" because of which i dont know what the upper bound of the for loop is
2] I am not sure whether i am accessing the "city" variable correctly inside the for loop.
[EDIT#1]
Based on the response given by Salman and Pointy, i had to inspect the python code that was returning the json data. After some debugging it was found that the JSON data was being returned using templates because of which the template name was occuring in the JSON data. I changed the mechanism of sending JSON and now the following is how the returned JSON data looks like
[{"city": {"city_name": "Framingham", "country": {"country_name": "United States", "id": null}, "id": null}, "id": 1, "status": true, "date_time": {"ctime": "Thu Apr 7 09:38:00 2011", "hour": 9, "isoweekday": 4, "month": 4, "second": 0, "microsecond": 796000, "isocalendar": [2011, 14, 4], "timetuple": [2011, 4, 7, 9, 38, 0, 3, 97, -1], "year": 2011, "epoch": 1302169080.0, "isoformat": "2011-04-07T09:38:00.796000", "day": 7, "minute": 38}}, {"city": {"city_name": "Framingham", "country": {"country_name": "United States", "id": null}, "id": null}, "id": 2, "status": false, "date_time": {"ctime": "Thu Apr 7 09:38:03 2011", "hour": 9, "isoweekday": 4, "month": 4, "second": 3, "microsecond": 359000, "isocalendar": [2011, 14, 4], "timetuple": [2011, 4, 7, 9, 38, 3, 3, 97, -1], "year": 2011, "epoch": 1302169083.0, "isoformat": "2011-04-07T09:38:03.359000", "day": 7, "minute": 38}}, {"city": {"city_name": "Framingham", "country": {"country_name": "United States", "id": null}, "id": null}, "id": 3, "status": true, "date_time": {"ctime": "Thu Apr 7 09:38:08 2011", "hour": 9, "isoweekday": 4, "month": 4, "second": 8, "microsecond": 281000, "isocalendar": [2011, 14, 4], "timetuple": [2011, 4, 7, 9, 38, 8, 3, 97, -1], "year": 2011, "epoch": 1302169088.0, "isoformat": "2011-04-07T09:38:08.281000", "day": 7, "minute": 38}}, {"city": {"city_name": "Framingham", "country": {"country_name": "United States", "id": null}, "id": null}, "id": 4, "status": false, "date_time": {"ctime": "Thu Apr 7 09:38:14 2011", "hour": 9, "isoweekday": 4, "month": 4, "second": 14, "microsecond": 578000, "isocalendar": [2011, 14, 4], "timetuple": [2011, 4, 7, 9, 38, 14, 3, 97, -1], "year": 2011, "epoch": 1302169094.0, "isoformat": "2011-04-07T09:38:14.578000", "day": 7, "minute": 38}}, {"city": {"city_name": "Framingham", "country": {"country_name": "United States", "id": null}, "id": null}, "id": 13, "status": true, "date_time": {"ctime": "Wed Apr 13 01:37:58 2011", "hour": 1, "isoweekday": 3, "month": 4, "second": 58, "microsecond": 343000, "isocalendar": [2011, 15, 3], "timetuple": [2011, 4, 13, 1, 37, 58, 2, 103, -1], "year": 2011, "epoch": 1302658678.0, "isoformat": "2011-04-13T01:37:58.343000", "day": 13, "minute": 37}}, {"city": {"city_name": "Framingham", "country": {"country_name": "United States", "id": null}, "id": null}, "id": 14, "status": false, "date_time": {"ctime": "Wed Apr 13 01:38:01 2011", "hour": 1, "isoweekday": 3, "month": 4, "second": 1, "microsecond": 78000, "isocalendar": [2011, 15, 3], "timetuple": [2011, 4, 13, 1, 38, 1, 2, 103, -1], "year": 2011, "epoch": 1302658681.0, "isoformat": "2011-04-13T01:38:01.078000", "day": 13, "minute": 38}}, {"city": {"city_name": "Framingham", "country": {"country_name": "United States", "id": null}, "id": null}, "id": 23, "status": true, "date_time": {"ctime": "Sun Apr 17 21:24:18 2011", "hour": 21, "isoweekday": 7, "month": 4, "second": 18, "microsecond": 625000, "isocalendar": [2011, 15, 7], "timetuple": [2011, 4, 17, 21, 24, 18, 6, 107, -1], "year": 2011, "epoch": 1303075458.0, "isoformat": "2011-04-17T21:24:18.625000", "day": 17, "minute": 24}}]
I am still struggling to get a for loop around this json structure.
[EDIT#2]
After some debugging and response give by #Salman, the following function does the job
function LoadUsersDatatable(data) {
var tbody = $("#datatable_for_current_users > tbody").html("");
jsonData = jQuery.parseJSON(data);
for (var i = 0; i < jsonData.length; i++)
{
var citydata = jsonData[i];
var rowText = "<tr class='gradeA'><td>" + citydata.city.country.country_name + "</td><td>" + citydata.city.city_name + "</td><td>" + citydata.status + "</td><td>" + citydata.date_time.ctime + "</td></tr>";
$(rowText).appendTo(tbody);
}
}
One problem i found while debugging was the JSON returned was in string format and had to be converted to a JSON object, this was done using jQuery.

You seem to be using jQuery. If you want to generate straight HTML from JSON data, one easy solution is to use simple templates through plugin, like jQote2. It provides an easy syntax, that loops through your data. Using JS templates also makes it easier to maintain your HTML structure.

Strange, it seems like data_for_users_city is not and array but a string. I hope this is not a typo or copy/paste error.
Edit 1
Even when you treat it as a string, your JSON still has errors. Newlines inside quotes are not allowed in JavaScript, you must replace them with \n, use the + concatenation operator or use \ to split the string on multiple lines. In case you manage to workaround these problems, you can do a:
var data_for_users_city = eval(data.data_for_users_city);
// sometimes adding extra parenthesis help
// var data_for_users_city = eval('(' + data.data_for_users_city + ')');
alert(data_for_users_city.length);
EDIT 2
This is a quick and dirty demo that I created and tested in FireFox/Firebug console. It basically demonstrates how you can access the three levels of data inside the JSON. To visualize your JSON data properly, copy the following code and paste in jsbeautifier.
var data = [{"city": {"city_name": "Framingham", "country": {"country_name": "United States", "id": null}, "id": null}, "id": 1, "status": true, "date_time": {"ctime": "Thu Apr 7 09:38:00 2011", "hour": 9, "isoweekday": 4, "month": 4, "second": 0, "microsecond": 796000, "isocalendar": [2011, 14, 4], "timetuple": [2011, 4, 7, 9, 38, 0, 3, 97, -1], "year": 2011, "epoch": 1302169080.0, "isoformat": "2011-04-07T09:38:00.796000", "day": 7, "minute": 38}}, {"city": {"city_name": "Framingham", "country": {"country_name": "United States", "id": null}, "id": null}, "id": 2, "status": false, "date_time": {"ctime": "Thu Apr 7 09:38:03 2011", "hour": 9, "isoweekday": 4, "month": 4, "second": 3, "microsecond": 359000, "isocalendar": [2011, 14, 4], "timetuple": [2011, 4, 7, 9, 38, 3, 3, 97, -1], "year": 2011, "epoch": 1302169083.0, "isoformat": "2011-04-07T09:38:03.359000", "day": 7, "minute": 38}}, {"city": {"city_name": "Framingham", "country": {"country_name": "United States", "id": null}, "id": null}, "id": 3, "status": true, "date_time": {"ctime": "Thu Apr 7 09:38:08 2011", "hour": 9, "isoweekday": 4, "month": 4, "second": 8, "microsecond": 281000, "isocalendar": [2011, 14, 4], "timetuple": [2011, 4, 7, 9, 38, 8, 3, 97, -1], "year": 2011, "epoch": 1302169088.0, "isoformat": "2011-04-07T09:38:08.281000", "day": 7, "minute": 38}}, {"city": {"city_name": "Framingham", "country": {"country_name": "United States", "id": null}, "id": null}, "id": 4, "status": false, "date_time": {"ctime": "Thu Apr 7 09:38:14 2011", "hour": 9, "isoweekday": 4, "month": 4, "second": 14, "microsecond": 578000, "isocalendar": [2011, 14, 4], "timetuple": [2011, 4, 7, 9, 38, 14, 3, 97, -1], "year": 2011, "epoch": 1302169094.0, "isoformat": "2011-04-07T09:38:14.578000", "day": 7, "minute": 38}}, {"city": {"city_name": "Framingham", "country": {"country_name": "United States", "id": null}, "id": null}, "id": 13, "status": true, "date_time": {"ctime": "Wed Apr 13 01:37:58 2011", "hour": 1, "isoweekday": 3, "month": 4, "second": 58, "microsecond": 343000, "isocalendar": [2011, 15, 3], "timetuple": [2011, 4, 13, 1, 37, 58, 2, 103, -1], "year": 2011, "epoch": 1302658678.0, "isoformat": "2011-04-13T01:37:58.343000", "day": 13, "minute": 37}}, {"city": {"city_name": "Framingham", "country": {"country_name": "United States", "id": null}, "id": null}, "id": 14, "status": false, "date_time": {"ctime": "Wed Apr 13 01:38:01 2011", "hour": 1, "isoweekday": 3, "month": 4, "second": 1, "microsecond": 78000, "isocalendar": [2011, 15, 3], "timetuple": [2011, 4, 13, 1, 38, 1, 2, 103, -1], "year": 2011, "epoch": 1302658681.0, "isoformat": "2011-04-13T01:38:01.078000", "day": 13, "minute": 38}}, {"city": {"city_name": "Framingham", "country": {"country_name": "United States", "id": null}, "id": null}, "id": 23, "status": true, "date_time": {"ctime": "Sun Apr 17 21:24:18 2011", "hour": 21, "isoweekday": 7, "month": 4, "second": 18, "microsecond": 625000, "isocalendar": [2011, 15, 7], "timetuple": [2011, 4, 17, 21, 24, 18, 6, 107, -1], "year": 2011, "epoch": 1303075458.0, "isoformat": "2011-04-17T21:24:18.625000", "day": 17, "minute": 24}}];
var table = $("<table border='1'/>");
var thead = $("<thead/>")
.appendTo(table);
$("<tr/>")
.append("<th>Country</th>")
.append("<th>City</th>")
.append("<th>Status</th>")
.append("<th>Time</th>")
.appendTo(thead);
var tbody = $("<tbody/>")
.appendTo(table);
for (var i = 0; i < data.length; i++) {
var citydata = data[i];
$("<tr/>")
.append("<td>" + citydata.city.country.country_name + "</td>")
.append("<td>" + citydata.city.city_name + "</td>")
.append("<td>" + citydata.status + "</td>")
.append("<td>" + citydata.date_time.ctime + "</td>")
.appendTo(tbody);
}
//
// FOR TESTING
//
$("body").append(table);

Did you consider using a Javascript template engine for converting JSON to HTML?
I'm the author of pure.js which is quite original, but there are plenty of classical double-brackets-engines available.

If you are using jQuery consider using the var json = $.parseJSON(data). This will convert your JSON string into a JSON object.
Try it out. It should make getting to your objects a lot easier.

Related

Collecting specific elements from array [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 24 days ago.
Improve this question
I'm trying restructure an array and build another one. Tried to use filter, map, but couldn't achieved that. There are some factors in array and it's ratings (the 5 elements of object from the beginning). I should collect them in another array. I have an array like this.
[{
"carryRating": 21,
"distanceRating": 72,
"obHavoYogingarchilikQorVaHKRating": 74,
"obHavoQuruqRating": 40,
"yetkazibBeruvchiningMoliyaviyAhvoliRating": 32,
"id": 1,
"direction": "A",
"distance": "90.55",
"carry": "365",
"obHavoQuruq": "50",
"yetkazibBeruvchiningMoliyaviyAhvoli": "56",
"obHavoYogingarchilikQorVaHK": "58"
}, {
"carryRating": 35,
"distanceRating": 74,
"obHavoYogingarchilikQorVaHKRating": 71,
"obHavoQuruqRating": 29,
"yetkazibBeruvchiningMoliyaviyAhvoliRating": 55,
"id": 2,
"direction": "B",
"distance": "82.46",
"carry": "589",
"obHavoQuruq": "36",
"yetkazibBeruvchiningMoliyaviyAhvoli": "98",
"obHavoYogingarchilikQorVaHK": "65"
}, {
"carryRating": 19,
"distanceRating": 76,
"obHavoYogingarchilikQorVaHKRating": 90,
"obHavoQuruqRating": 17,
"yetkazibBeruvchiningMoliyaviyAhvoliRating": 11,
"id": 3,
"direction": "C",
"distance": "76.16",
"carry": "326",
"obHavoQuruq": "21",
"yetkazibBeruvchiningMoliyaviyAhvoli": "20",
"obHavoYogingarchilikQorVaHK": "23"
}, {
"carryRating": 25,
"distanceRating": 78,
"obHavoYogingarchilikQorVaHKRating": 65,
"obHavoQuruqRating": 14,
"yetkazibBeruvchiningMoliyaviyAhvoliRating": 2,
"id": 4,
"direction": "D",
"distance": "72.11",
"carry": "421",
"obHavoQuruq": "17",
"yetkazibBeruvchiningMoliyaviyAhvoli": "3",
"obHavoYogingarchilikQorVaHK": "78"
}]
I want to restructure it like this:
const newData = [
{
factor: "carry",
firstElementOfArray: 21, // it's carryRating
secondElementOfArray: 35,
thirdElementOfArray: 19,
fourthElementOfArray: 25
},
{
factor: "distance",
firstElementOfArray: 72, // it's distanceRating
secondElementOfArray: 74,
thirdElementOfArray: 76,
fourthElementOfArray: 78
},
{
factor: "obHavoQuruq",
firstElementOfArray: 40, // it's obHavoQuruqRating
secondElementOfArray: 29,
thirdElementOfArray: 17,
fourthElementOfArray: 14
},
{
factor: "yetkazibBeruvchiningMoliyaviyAhvoli",
firstElementOfArray: 32, // it's yetkazibBeruvchiningMoliyaviyAhvoliRating
secondElementOfArray: 55,
thirdElementOfArray: 11,
fourthElementOfArray: 2
},
{
factor: "obHavoYogingarchilikQorVaHK",
firstElementOfArray: 74, // it's obHavoYogingarchilikQorVaHKRating
secondElementOfArray: 71,
thirdElementOfArray: 90,
fourthElementOfArray: 65
},
]
How can I do that?
I'd solve it by mapping keys with properties, and iterating over them.
This solution does require you to have a fixed number of items in the input array, but it could be expanded with some kind of "translation" from [x] to 'x-thElementOfArray' if needed as well.
let input = [{
"carryRating": 21,
"distanceRating": 72,
"obHavoYogingarchilikQorVaHKRating": 74,
"obHavoQuruqRating": 40,
"yetkazibBeruvchiningMoliyaviyAhvoliRating": 32,
"id": 1,
"direction": "A",
"distance": "90.55",
"carry": "365",
"obHavoQuruq": "50",
"yetkazibBeruvchiningMoliyaviyAhvoli": "56",
"obHavoYogingarchilikQorVaHK": "58"
}, {
"carryRating": 35,
"distanceRating": 74,
"obHavoYogingarchilikQorVaHKRating": 71,
"obHavoQuruqRating": 29,
"yetkazibBeruvchiningMoliyaviyAhvoliRating": 55,
"id": 2,
"direction": "B",
"distance": "82.46",
"carry": "589",
"obHavoQuruq": "36",
"yetkazibBeruvchiningMoliyaviyAhvoli": "98",
"obHavoYogingarchilikQorVaHK": "65"
}, {
"carryRating": 19,
"distanceRating": 76,
"obHavoYogingarchilikQorVaHKRating": 90,
"obHavoQuruqRating": 17,
"yetkazibBeruvchiningMoliyaviyAhvoliRating": 11,
"id": 3,
"direction": "C",
"distance": "76.16",
"carry": "326",
"obHavoQuruq": "21",
"yetkazibBeruvchiningMoliyaviyAhvoli": "20",
"obHavoYogingarchilikQorVaHK": "23"
}, {
"carryRating": 25,
"distanceRating": 78,
"obHavoYogingarchilikQorVaHKRating": 65,
"obHavoQuruqRating": 14,
"yetkazibBeruvchiningMoliyaviyAhvoliRating": 2,
"id": 4,
"direction": "D",
"distance": "72.11",
"carry": "421",
"obHavoQuruq": "17",
"yetkazibBeruvchiningMoliyaviyAhvoli": "3",
"obHavoYogingarchilikQorVaHK": "78"
}];
let propertyMapping = {
carry: "carryRating",
distance: "distanceRating",
obHavoQuruq: "obHavoQuruqRating",
yetkazibBeruvchiningMoliyaviyAhvoli: "yetkazibBeruvchiningMoliyaviyAhvoliRating",
obHavoYogingarchilikQorVaHK: "obHavoYogingarchilikQorVaHKRating"
};
let output = Object.keys(propertyMapping).map(key => ({
factor: key,
firstElementOfArray: input[0][propertyMapping[key]],
secondElementOfArray: input[1][propertyMapping[key]],
thirdElementOfArray: input[2][propertyMapping[key]],
fourthElementOfArray: input[3][propertyMapping[key]]
}));
console.log(output);
Update
Alternatively, as you added that the source data will not always contain 4 items, it would be better to use a different output format (as proposed in the comments as well).
For example:
let output = Object.keys(propertyMapping).map(key => ({
factor: key,
items: input.map(it => it[propertyMapping[key]])
}));
or
let output = Object.keys(propertyMapping).reduce((prev, key) => ({ ...prev,
[key]: input.map(it => it[propertyMapping[key]])
}), {})

How to sort this object by months?

This is my array object:
arr = {Jun: 25, Jan: 29, Mar: 26, Feb: 24, Apr: 22}
I want to sort it like this (month wise):
{Jan: 29, Feb: 24, Mar: 26, Apr: 22, Jun: 25}
I tried this method:
var monthNames = {
"Jan": 1,
"Feb": 2,
"Mar": 3,
"Apr": 4,
"May": 5,
"Jun": 6,
"Jul": 7,
"Aug": 8,
"Sep": 9,
"Oct": 10,
"Nov": 11,
"Dec": 12
};
arr.asort(function (a, b) {
return monthNames[a[0]] - monthNames[b[0]]
})
But it's not working.
you cannot sort the keys inside of a object
and your arr is an object not an array
you can turn it into an array and the sort it
like this
const data = {Jun: 25, Jan: 29, Mar: 26, Feb: 24, Apr: 22}
const monthNames = {
"Jan": 1,
"Feb": 2,
"Mar": 3,
"Apr": 4,
"May": 5,
"Jun": 6,
"Jul": 7,
"Aug": 8,
"Sep": 9,
"Oct": 10,
"Nov": 11,
"Dec": 12
};
const sorted = Object.entries(data).sort((a, b) => monthNames[a[0]] - monthNames[b[0]])
console.log(sorted)

how to create jquery variables from json file?

Any help is very much appreciated.
Basically I am using an api from mashape, but I'm a bit of a newbie to JSON files.
What I want to do is create a load of jquery variables for each teams total points.
Bare in mind that the teams change position in the JSON file depending on their position in the table.
Below is my jquery code so far (without the auth code) and the JSON file.
$.ajax({
url: 'https://heisenbug-premier-league-live-scores-v1.p.mashape.com/api/premierleague/table',
type: 'GET',
data: {},
dataType: 'json',
success: function(data) {
$(data.records).each(function(index, value) {
});
console.dir((data.source));
},
error: function(err) { alert(err); },
beforeSend: function(xhr) {
xhr.setRequestHeader("X-Mashape-Authorization",
"Auth Code");
}
});
And the JSON file.
{
"records": [
{
"team": "Manchester City",
"played": 10,
"win": 8,
"draw": 0,
"loss": 2,
"goalsFor": 29,
"goalsAgainst": 12,
"points": 24
},
{
"team": "Arsenal",
"played": 10,
"win": 7,
"draw": 2,
"loss": 1,
"goalsFor": 16,
"goalsAgainst": 6,
"points": 23
},
{
"team": "Tottenham",
"played": 10,
"win": 5,
"draw": 4,
"loss": 1,
"goalsFor": 18,
"goalsAgainst": 7,
"points": 19
},
{
"team": "Leicester",
"played": 10,
"win": 5,
"draw": 4,
"loss": 1,
"goalsFor": 16,
"goalsAgainst": 13,
"points": 19
},
{
"team": "Manchester United",
"played": 10,
"win": 5,
"draw": 4,
"loss": 1,
"goalsFor": 12,
"goalsAgainst": 4,
"points": 19
},
{
"team": "West Ham",
"played": 10,
"win": 4,
"draw": 4,
"loss": 2,
"goalsFor": 16,
"goalsAgainst": 12,
"points": 16
},
{
"team": "Liverpool",
"played": 9,
"win": 4,
"draw": 3,
"loss": 2,
"goalsFor": 11,
"goalsAgainst": 11,
"points": 15
},
{
"team": "Norwich",
"played": 10,
"win": 4,
"draw": 3,
"loss": 3,
"goalsFor": 12,
"goalsAgainst": 10,
"points": 15
},
{
"team": "Southampton",
"played": 10,
"win": 4,
"draw": 2,
"loss": 4,
"goalsFor": 17,
"goalsAgainst": 13,
"points": 14
},
{
"team": "Chelsea",
"played": 10,
"win": 4,
"draw": 2,
"loss": 4,
"goalsFor": 15,
"goalsAgainst": 14,
"points": 14
},
{
"team": "West Bromwich Albion",
"played": 11,
"win": 4,
"draw": 2,
"loss": 5,
"goalsFor": 14,
"goalsAgainst": 17,
"points": 14
},
{
"team": "Crystal Palace",
"played": 11,
"win": 4,
"draw": 2,
"loss": 5,
"goalsFor": 12,
"goalsAgainst": 12,
"points": 14
},
{
"team": "Watford",
"played": 11,
"win": 4,
"draw": 2,
"loss": 5,
"goalsFor": 11,
"goalsAgainst": 10,
"points": 14
},
{
"team": "Stoke",
"played": 9,
"win": 4,
"draw": 1,
"loss": 4,
"goalsFor": 10,
"goalsAgainst": 9,
"points": 13
},
{
"team": "Swansea",
"played": 10,
"win": 3,
"draw": 4,
"loss": 3,
"goalsFor": 9,
"goalsAgainst": 12,
"points": 13
},
{
"team": "Everton",
"played": 11,
"win": 3,
"draw": 4,
"loss": 4,
"goalsFor": 23,
"goalsAgainst": 20,
"points": 13
},
{
"team": "Sunderland",
"played": 10,
"win": 3,
"draw": 2,
"loss": 5,
"goalsFor": 12,
"goalsAgainst": 11,
"points": 11
},
{
"team": "Bournemouth",
"played": 9,
"win": 2,
"draw": 4,
"loss": 3,
"goalsFor": 10,
"goalsAgainst": 13,
"points": 10
},
{
"team": "Newcastle United",
"played": 10,
"win": 2,
"draw": 4,
"loss": 4,
"goalsFor": 14,
"goalsAgainst": 14,
"points": 10
},
{
"team": "Aston Villa",
"played": 9,
"win": 0,
"draw": 3,
"loss": 6,
"goalsFor": 6,
"goalsAgainst": 13,
"points": 3
}
]
}
Thank You Very Much!
To create an object and add the total points for each team, you'll need to create a map (key/value) where the key is each team's name and the value is the total points for each team.
I'm hosting your data on MyJSON.
Here's a function that retrieves the data from the remote server, and initializes an object containing the total points for each team:
function getData() {
// https://api.myjson.com/bins/1c6utx
var teamScores = {};
$.get("https://api.myjson.com/bins/1c6utx", function(data, status){
$.each(data.records, function(index, value) {
if (!teamScores[value.team]) {
teamScores[value.team] = 0;
}
teamScores[value.team] += value.points;
});
console.log(JSON.stringify(teamScores));
});
}
/* Output:
{"Manchester City":24,"Arsenal":23,"Tottenham":19,"Leicester":19,"Manchester United":19,"West Ham":16,"Liverpool":15,"Norwich":15,"Southampton":14,"Chelsea":14,"West Bromwich Albion":14,"Crystal Palace":14,"Watford":14,"Stoke":13,"Swansea":13,"Everton":13,"Sunderland":11,"Bournemouth":10,"Newcastle United":10,"Aston Villa":3}
*/
You can check this fiddle to see it in action. Hope this helps!

Angular js will only show first element in ng-repeat

I am using angular 1.5.5
function GetDashboardForAllEmployees()
{
var response = eRotaService.GetDashboard();
response.then(function (data) {
$scope.weekDays = data.data;
console.log(data.data);
}, function () {
alert("Failed to load dashboard.");
})
}
.NET service returns json :
{
"weekDays": [{
"name": "Monday",
"display": 0,
"employees": [{
"employeeId": 1,
"name": "Adam",
"start": 8,
"finish": 16,
"gridSetup": {
"sizeX": 8,
"sizeY": 1,
"row": 0,
"col": 8
}
}, {
"employeeId": 2,
"name": "Paul",
"start": 16,
"finish": 22,
"gridSetup": {
"sizeX": 6,
"sizeY": 1,
"row": 0,
"col": 16
}
}]
}, {
"name": "Tuesday",
"display": 1,
"employees": [{
"employeeId": 1,
"name": "Bob",
"start": 10,
"finish": 18,
"gridSetup": {
"sizeX": 8,
"sizeY": 1,
"row": 0,
"col": 10
}
}, {
"employeeId": 2,
"name": "Paul",
"start": 16,
"finish": 22,
"gridSetup": {
"sizeX": 6,
"sizeY": 1,
"row": 0,
"col": 16
}
}]
}]
}
I am planning to display each day of the week, but only first day will show(Monday).
<div class="row" ng-repeat="week in weekDays">
#for (int i = -2; i < 22; i+=2 )
{
<div class="col-sm-1">
#string.Format("{0}:00", i + 2)
</div>
}
<hr />
<div class="col-sm-12">
<h3>{{week[$index].name}}</h3>
<hr />
<div class="row" ng-repeat="employee in week[$index].employees">
<div class="col-sm-12">
<h4>{{employee.name}}</h4>
<hr />
<div gridster>
<ul>
<li gridster-item="employee.gridSetup" ng-cloak>
<div class="panel-default" >
<div class="panel-heading">
<h5>From : {{employee.start}} to {{employee.finish}}</h5>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
I tried to use ng-repeat without $index but result was blank page (no angular js error).
<div class="row" ng-repeat="week in weekDays">
hm mustn't it be
<div class="row" ng-repeat="week in weekDays.weekDays">
The Jason-String looks somewat formated like this:
{
"weekDays": [
{
"name": "Monday",
"display": 0,
"employees": [
{
"employeeId": 1,
"name": "Adam",
"start": 8,
"finish": 16,
"gridSetup": {
"sizeX": 8,
"sizeY": 1,
"row": 0,
"col": 8
}
},
{
"employeeId": 2,
"name": "Paul",
"start": 16,
"finish": 22,
"gridSetup": {
"sizeX": 6,
"sizeY": 1,
"row": 0,
"col": 16
}
}
]
},
{
"name": "Tuesday",
"display": 1,
"employees": [
{
"employeeId": 1,
"name": "Bob",
"start": 10,
"finish": 18,
"gridSetup": {
"sizeX": 8,
"sizeY": 1,
"row": 0,
"col": 10
}
},
{
"employeeId": 2,
"name": "Paul",
"start": 16,
"finish": 22,
"gridSetup": {
"sizeX": 6,
"sizeY": 1,
"row": 0,
"col": 16
}
}
]
}
]
}
so this means that all weekdays are in the element "weekDays". And then you have in week only one week and don't need an array-indexer to access the hole thing.

Remove an object from an array

What is the way to remove an property named "itemType"from the below given object
?
{
"id": 19,
"cost": 10,
"items": 10,
"numbers": 10,
"status": false,
"hours": 10,
"itemType": {
"id": 16,
"name": "PC 350",
"description": "PC 350"
},
"typeid": 12
}
So that the final array should look like
{
"id": 19,
"cost": 10,
"items": 10,
"numbers": 10,
"status": false,
"hours": 10,
"typeid": 12
}
This is object not array. You can use delete like this
var obj = {
"id": 19,
"cost": 10,
"items": 10,
"numbers": 10,
"status": false,
"hours": 10,
"itemType": {
"id": 16,
"name": "PC 350",
"description": "PC 350"
},
"typeid": 12
}
delete obj.itemType;
Whether it is an object and you want to delete a property from it, or you have an array and want to delete a value, the way to delete is -
delete obj.itemType //object.
delete array[3] //delete 4th item from the array.
Note - the structure you have provided is not an array, its an object.

Categories

Resources