data = [
{
"index": 0,
"id": 47,
"sepallengthcm": 5.1,
"sepalwidthcm": 3.8,
"unnamed:_3": 1.6,
"petalwidthcm": 0.2,
"species": "setosa"
},
{
"index": 1,
"id": 48,
"sepallengthcm": 4.6,
"sepalwidthcm": 3.2,
"unnamed:_3": 1.4,
"petalwidthcm": 0.2,
"species": "setosa"
},
{
"index": 2,
"id": 49,
"sepallengthcm": 5.3,
"sepalwidthcm": 3.7,
"unnamed:_3": 1.5,
"petalwidthcm": 0.2,
"species": "jennifer"
},
{
"index": 3,
"id": 50,
"sepallengthcm": 5.0,
"sepalwidthcm": 3.3,
"unnamed:_3": 1.4,
"petalwidthcm": 0.2,
"species": "setosa"
},
{
"index": 4,
"id": 97,
"sepallengthcm": 12.0,
"sepalwidthcm": 2.9,
"unnamed:_3": 4.2,
"petalwidthcm": 1.3,
"species": "jennifer"
},
{
"index": 5,
"id": 98,
"sepallengthcm": 6.2,
"sepalwidthcm": 2.9,
"unnamed:_3": 4.3,
"petalwidthcm": 1.3,
"species": "jennifer"
},
{
"index": 6,
"id": 99,
"sepallengthcm": 5.1,
"sepalwidthcm": 2.5,
"unnamed:_3": 3.0,
"petalwidthcm": 1.1,
"species": "kajol"
},
{
"index": 7,
"id": 100,
"sepallengthcm": 11.0,
"sepalwidthcm": 2.8,
"unnamed:_3": 7.0,
"petalwidthcm": 1.3,
"species": "floaw"
},
{
"index": 8,
"id": 101,
"sepallengthcm": 6.3,
"sepalwidthcm": 3.3,
"unnamed:_3": 6.0,
"petalwidthcm": 2.5,
"species": "Iris-flower"
},
{
"index": 9,
"id": 102,
"sepallengthcm": 5.8,
"sepalwidthcm": 2.7,
"unnamed:_3": 5.1,
"petalwidthcm": 1.9,
"species": "Iris-flower"
}
]
Here is my input data.
I am trying to achive distict count of this data using spcific field
result = distictCount("species")
result = [
{
"species": "Iris-flower",
"sepallengthcm": 5.8,
"sepalwidthcm": 2.7
},
{
"species": "floaw",
"sepallengthcm": 11.0,
"sepalwidthcm": 2.8
},
{
"species": "jennifer",
"sepallengthcm": 5.3,
"sepalwidthcm": 2.9
},
{
"species": "kajol",
"sepallengthcm": 5.1,
"sepalwidthcm": 4.5
},
{
"species": "setosa",
"sepallengthcm": 3.2,
"sepalwidthcm": 2.7
}
]
Above result i am expecting
I am trying to achive minimum value by aggregationg selected fields. for two fields ata time
let GroupMin = (arr, category, value1, value2) => {
let result = Object.values(arr.reduce(function(r, e) {
let key = e[category];
if (!r[key]) r[key] = e;
else {
let first_value = parseFloat(r[key][value1])
let second_value = parseFloat(r[key][value2])
if(parseFloat(e[value1]) > first_value){
first_value = parseFloat(e[value1]);
}
if(parseFloat(e[value2]) > second_value){
second_value = parseFloat(e[value2]);
}
}
return r;
}, {}))
return result
}
GroupMin(data, "setosa", "sepallengthcm", "sepalwidthcm)
My code is not working.
Please take a look.
How can we do that
Thanks
You could first group by a key.
After you have your groups, you can reduce the values and map the fields to the minimum values.
const key = 'species';
const fields = [ 'species', 'sepallengthcm', 'sepalwidthcm' ];
const main = () => {
fetchData().then(data =>
console.log(distictCount(data, key, fields)));
};
const distictCount = (data, key, fields) => {
const groups = data.reduce((result, data) => ({
...result,
[data[key]]: [ ...(result[data[key]] || []), data ]
}), {});
const values = Object.values(groups).map(group =>
fields.reduce((res, field) => ({
...res,
[field]: field === key
? group[0][key]
: Math.min(...group.map(obj => obj[field]))
}), {}));
return values.sort((a, b) =>
a[key].localeCompare(b[key], 'en', { sensitivity: 'base' }));
};
const fetchData = () => Promise.resolve([{
"index": 0,
"id": 47,
"sepallengthcm": 5.1,
"sepalwidthcm": 3.8,
"unnamed:_3": 1.6,
"petalwidthcm": 0.2,
"species": "setosa"
}, {
"index": 1,
"id": 48,
"sepallengthcm": 4.6,
"sepalwidthcm": 3.2,
"unnamed:_3": 1.4,
"petalwidthcm": 0.2,
"species": "setosa"
}, {
"index": 2,
"id": 49,
"sepallengthcm": 5.3,
"sepalwidthcm": 3.7,
"unnamed:_3": 1.5,
"petalwidthcm": 0.2,
"species": "jennifer"
}, {
"index": 3,
"id": 50,
"sepallengthcm": 5.0,
"sepalwidthcm": 3.3,
"unnamed:_3": 1.4,
"petalwidthcm": 0.2,
"species": "setosa"
}, {
"index": 4,
"id": 97,
"sepallengthcm": 12.0,
"sepalwidthcm": 2.9,
"unnamed:_3": 4.2,
"petalwidthcm": 1.3,
"species": "jennifer"
}, {
"index": 5,
"id": 98,
"sepallengthcm": 6.2,
"sepalwidthcm": 2.9,
"unnamed:_3": 4.3,
"petalwidthcm": 1.3,
"species": "jennifer"
}, {
"index": 6,
"id": 99,
"sepallengthcm": 5.1,
"sepalwidthcm": 2.5,
"unnamed:_3": 3.0,
"petalwidthcm": 1.1,
"species": "kajol"
}, {
"index": 7,
"id": 100,
"sepallengthcm": 11.0,
"sepalwidthcm": 2.8,
"unnamed:_3": 7.0,
"petalwidthcm": 1.3,
"species": "floaw"
}, {
"index": 8,
"id": 101,
"sepallengthcm": 6.3,
"sepalwidthcm": 3.3,
"unnamed:_3": 6.0,
"petalwidthcm": 2.5,
"species": "Iris-flower"
}, {
"index": 9,
"id": 102,
"sepallengthcm": 5.8,
"sepalwidthcm": 2.7,
"unnamed:_3": 5.1,
"petalwidthcm": 1.9,
"species": "Iris-flower"
}]);
main();
.as-console-wrapper { top: 0; max-height: 100% !important; }
Related
I am trying to implement a histogram with Highcharts. The histogram is not displaying as I get notified of a script error, but I don't see what is wrong with the code.
var data = [3.5, 3, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3, 3,
4, 4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3, 3.4, 3.5, 3.4,
3.2, 3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.6, 3, 3.4, 3.5, 2.3, 3.2, 3.5,
3.8, 3, 3.8, 3.2, 3.7, 3.3, 3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9,
2.7, 2, 3, 2.2, 2.9, 2.9, 3.1, 3, 2.7, 2.2, 2.5, 3.2, 2.8, 2.5, 2.8, 2.9,
3, 2.8, 3, 2.9, 2.6, 2.4, 2.4, 2.7, 2.7, 3, 3.4, 3.1, 2.3, 3, 2.5, 2.6,
3, 2.6, 2.3, 2.7, 3, 2.9, 2.9, 2.5, 2.8, 3.3, 2.7, 3, 2.9, 3, 3, 2.5, 2.9,
2.5, 3.6, 3.2, 2.7, 3, 2.5, 2.8, 3.2, 3, 3.8, 2.6, 2.2, 3.2, 2.8, 2.8, 2.7,
3.3, 3.2, 2.8, 3, 2.8, 3, 2.8, 3.8, 2.8, 2.8, 2.6, 3, 3.4, 3.1, 3, 3.1,
3.1, 3.1, 2.7, 3.2, 3.3, 3, 2.5, 3, 3.4, 3];
Highcharts.chart('container', {
title: {
text: 'Highcharts Histogram'
},
xAxis: [{
title: { text: 'Histogram' },
alignTicks: false,
opposite: false
}],
yAxis: [{
title: { text: 'Histogram' },
opposite: false
}],
plotOptions: {
histogram: {
accessibility: {
point: {
valueDescriptionFormat: '{index}. {point.x:.3f} to {point.x2:.3f}, {point.y}.'
}
}
}
},
series: [{
name: 'Histogram',
type: 'histogram',
xAxis: 1,
yAxis: 1,
baseSeries: 's1',
zIndex: -1
}]
});
The code won't display.
You need to load histogram-bellcurve module and correctly configure your series and axes.
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/histogram-bellcurve.js"></script>
Live demo: http://jsfiddle.net/BlackLabel/0qLcahn4/
Docs: https://www.highcharts.com/docs/chart-and-series-types/histogram-series
I'm new to chart-js, I'm implementing Stacks bar charts in an app. everything work perfect , but in case of negative number bars are shown on wrong positions.
Click Here to see Image
In the Picture Downsell Should be before the churn , but on charts its displaying after the churn ,
Here is the code :
var ctx = document.getElementById('chartJSContainer').getContext('2d');
window.RevenueChangesByMonth = new Chart(ctx, {
"type": "bar",
"data": {
"labels": [
"Upsell",
"New",
"Downsell",
"Churn"
],
"datasets": [
{
"label": "New",
"type": "bar",
"order": 2,
"data": [
345,
842,
351,
155,
877,
705,
457,
224,
386,
689,
232,
332,
242,
142,
236,
342,
269,
232,
733,
247,
450,
306,
328,
345
],
"borderColor": "#a6cd95",
"backgroundColor": "#a6cd95"
},
{
"label": "Upsell",
"type": "bar",
"order": 1,
"data": [
586,
446,
868,
492,
324,
977,
301,
553,
254,
170,
919,
457,
226,
188,
356,
675,
136,
745,
646,
227,
821,
454,
315,
442
],
"borderColor": "#d3e7cb",
"backgroundColor": "#d3e7cb"
},
{
"label": "Downsell",
"type": "bar",
"order": -1,
"data": [
-13,
-64,
-94,
-66,
-24,
-37,
-33,
-81,
-75,
-18,
-26,
-18,
-34,
-94,
-97,
-82,
-93,
-15,
-51,
-47,
-22,
-90,
-54,
-68
],
"borderColor": "#fdcab6",
"backgroundColor": "#fdcab6"
},
{
"label": "Churn",
"type": "bar",
"order": -2,
"data": [
-72,
-81,
-23,
-66,
-88,
-100,
-34,
-71,
-96,
-10,
-47,
-42,
-1,
-64,
-70,
-33,
-74,
-88,
-33,
-22,
-55,
-5,
-93,
-15
],
"borderColor": "#ff6666",
"backgroundColor": "#ff6666"
}
]
},
"options": {
"animation": false,
"plugins": {
"title": {
"display": true,
"text": "Revenue Changes By Month"
},
"datalabels": {
"display": false
}
},
"tooltips": {
"mode": "index",
"intersect": true
},
"scales": {
"xAxes": {
"stacked": true
},
"yAxes": {
"stacked": true
}
},
"legend": {
"display": false
},
"maintainAspectRatio": false
}
});
I have this JSON in my js script that goes on for another 150 elements :
const champlist=[{
"type": "champion",
"format": "standAloneComplex",
"version": "11.10.1",
"data": {
"Aatrox": {
"version": "11.10.1",
"id": "Aatrox",
"key": "266",
"name": "Aatrox",
"title": "the Darkin Blade",
"blurb": "Once honored defenders of Shurima against the Void, Aatrox and his brethren would eventually become an even greater threat to Runeterra, and were defeated only by cunning mortal sorcery. But after centuries of imprisonment, Aatrox was the first to find...",
"info": {
"attack": 8,
"defense": 4,
"magic": 3,
"difficulty": 4
},
"image": {
"full": "Aatrox.png",
"sprite": "champion0.png",
"group": "champion",
"x": 0,
"y": 0,
"w": 48,
"h": 48
},
"tags": ["Fighter", "Tank"],
"partype": "Blood Well",
"stats": {
"hp": 580,
"hpperlevel": 90,
"mp": 0,
"mpperlevel": 0,
"movespeed": 345,
"armor": 38,
"armorperlevel": 3.25,
"spellblock": 32,
"spellblockperlevel": 1.25,
"attackrange": 175,
"hpregen": 3,
"hpregenperlevel": 1,
"mpregen": 0,
"mpregenperlevel": 0,
"crit": 0,
"critperlevel": 0,
"attackdamage": 60,
"attackdamageperlevel": 5,
"attackspeedperlevel": 2.5,
"attackspeed": 0.651
}
},
"Ahri": {
"version": "11.10.1",
"id": "Ahri",
"key": "103",
"name": "Ahri",
"title": "the Nine-Tailed Fox",
"blurb": "Innately connected to the latent power of Runeterra, Ahri is a vastaya who can reshape magic into orbs of raw energy. She revels in toying with her prey by manipulating their emotions before devouring their life essence. Despite her predatory nature...",
"info": {
"attack": 3,
"defense": 4,
"magic": 8,
"difficulty": 5
},
"image": {
"full": "Ahri.png",
"sprite": "champion0.png",
"group": "champion",
"x": 48,
"y": 0,
"w": 48,
"h": 48
},
"tags": ["Mage", "Assassin"],
"partype": "Mana",
"stats": {
"hp": 526,
"hpperlevel": 92,
"mp": 418,
"mpperlevel": 25,
"movespeed": 330,
"armor": 21,
"armorperlevel": 3.5,
"spellblock": 30,
"spellblockperlevel": 0.5,
"attackrange": 550,
"hpregen": 5.5,
"hpregenperlevel": 0.6,
"mpregen": 8,
"mpregenperlevel": 0.8,
"crit": 0,
"critperlevel": 0,
"attackdamage": 53,
"attackdamageperlevel": 3,
"attackspeedperlevel": 2,
"attackspeed": 0.668
}
}
}
}];
But i want it to look like this, with only the "data" part of the JSON and the names removed :
[{
"version": "11.10.1",
"id": "Aatrox",
"key": "266",
"name": "Aatrox",
"title": "the Darkin Blade",
"blurb": "Once honored defenders of Shurima against the Void, Aatrox and his brethren would eventually become an even greater threat to Runeterra, and were defeated only by cunning mortal sorcery. But after centuries of imprisonment, Aatrox was the first to find...",
"info": {
"attack": 8,
"defense": 4,
"magic": 3,
"difficulty": 4
},
"image": {
"full": "Aatrox.png",
"sprite": "champion0.png",
"group": "champion",
"x": 0,
"y": 0,
"w": 48,
"h": 48
},
"tags": ["Fighter", "Tank"],
"partype": "Blood Well",
"stats": {
"hp": 580,
"hpperlevel": 90,
"mp": 0,
"mpperlevel": 0,
"movespeed": 345,
"armor": 38,
"armorperlevel": 3.25,
"spellblock": 32,
"spellblockperlevel": 1.25,
"attackrange": 175,
"hpregen": 3,
"hpregenperlevel": 1,
"mpregen": 0,
"mpregenperlevel": 0,
"crit": 0,
"critperlevel": 0,
"attackdamage": 60,
"attackdamageperlevel": 5,
"attackspeedperlevel": 2.5,
"attackspeed": 0.651
},
{
"version": "11.10.1",
"id": "Ahri",
"key": "103",
"name": "Ahri",
"title": "the Nine-Tailed Fox",
"blurb": "Innately connected to the latent power of Runeterra, Ahri is a vastaya who can reshape magic into orbs of raw energy. She revels in toying with her prey by manipulating their emotions before devouring their life essence. Despite her predatory nature...",
"info": {
"attack": 3,
"defense": 4,
"magic": 8,
"difficulty": 5
},
"image": {
"full": "Ahri.png",
"sprite": "champion0.png",
"group": "champion",
"x": 48,
"y": 0,
"w": 48,
"h": 48
},
"tags": ["Mage", "Assassin"],
"partype": "Mana",
"stats": {
"hp": 526,
"hpperlevel": 92,
"mp": 418,
"mpperlevel": 25,
"movespeed": 330,
"armor": 21,
"armorperlevel": 3.5,
"spellblock": 30,
"spellblockperlevel": 0.5,
"attackrange": 550,
"hpregen": 5.5,
"hpregenperlevel": 0.6,
"mpregen": 8,
"mpregenperlevel": 0.8,
"crit": 0,
"critperlevel": 0,
"attackdamage": 53,
"attackdamageperlevel": 3,
"attackspeedperlevel": 2,
"attackspeed": 0.668
}
}
];
Can anyone help me on how to do this please ? I've been searching all around the internet but every solution doesn't fit exactly my problem.
const champs = champList.map(obj => {
const champ = obj.data
return Object.values(champ)
})
This will return an array for you, you'll need to take champs[0] in order to format the data exactly how you want.
data = [
{
"index": 0,
"id": 47,
"sepallengthcm": 5.1,
"sepalwidthcm": 3.8,
"unnamed:_3": 1.6,
"petalwidthcm": 0.2,
"species": "setosa"
},
{
"index": 1,
"id": 48,
"sepallengthcm": 4.6,
"sepalwidthcm": 3.2,
"unnamed:_3": 1.4,
"petalwidthcm": 0.2,
"species": "setosa"
},
{
"index": 2,
"id": 49,
"sepallengthcm": 5.3,
"sepalwidthcm": 3.7,
"unnamed:_3": 1.5,
"petalwidthcm": 0.2,
"species": "jennifer"
},
{
"index": 3,
"id": 50,
"sepallengthcm": 5.0,
"sepalwidthcm": 3.3,
"unnamed:_3": 1.4,
"petalwidthcm": 0.2,
"species": "setosa"
},
{
"index": 4,
"id": 97,
"sepallengthcm": 12.0,
"sepalwidthcm": 2.9,
"unnamed:_3": 4.2,
"petalwidthcm": 1.3,
"species": "jennifer"
},
{
"index": 5,
"id": 98,
"sepallengthcm": 6.2,
"sepalwidthcm": 2.9,
"unnamed:_3": 4.3,
"petalwidthcm": 1.3,
"species": "jennifer"
},
{
"index": 6,
"id": 99,
"sepallengthcm": 5.1,
"sepalwidthcm": 2.5,
"unnamed:_3": 3.0,
"petalwidthcm": 1.1,
"species": "kajol"
},
{
"index": 7,
"id": 100,
"sepallengthcm": 11.0,
"sepalwidthcm": 2.8,
"unnamed:_3": 7.0,
"petalwidthcm": 1.3,
"species": "floaw"
},
{
"index": 8,
"id": 101,
"sepallengthcm": 6.3,
"sepalwidthcm": 3.3,
"unnamed:_3": 6.0,
"petalwidthcm": 2.5,
"species": "Iris-flower"
},
{
"index": 9,
"id": 102,
"sepallengthcm": 5.8,
"sepalwidthcm": 2.7,
"unnamed:_3": 5.1,
"petalwidthcm": 1.9,
"species": "Iris-flower"
}
]
Here is my input
export const groupByMultiple = (arr, category, value1, value2) => {
let result = Object.values(arr.reduce(function(r, e) {
let key = e[category];
if (!r[key]) r[key] = e;
else {
let first_value = parseFloat(r[key][value1])
let second_value = parseFloat(r[key][value2])
first_value += parseFloat(e[value1]);
second_value += parseFloat(e[value2])
}
return r;
}, {}))
return result
}
groupByMultiple(data, "species", "sepallengthcm", "sepalwidthcm")
Above function gives sum by aggregating species and summing sepallengthcm and sepalwidthcm.
Same way i am trying to achieve avg and count. But, unfortunately my methods are not working.
Please take a look
Thanks..
Above function gives sum by aggregating species and summing sepallengthcm and sepalwidthcm.
Same way i am trying to achieve avg and count. But, unfortunately my methods are not working.
Please take a look
Thanks..
You can add new key count for each key in the reduce function. And then with the result array you can call .map() and calculate the average for value1 and value2 and add them as key in the object and then return that object,
data = [
{
"index": 0,
"id": 47,
"sepallengthcm": 5.1,
"sepalwidthcm": 3.8,
"unnamed:_3": 1.6,
"petalwidthcm": 0.2,
"species": "setosa"
},
{
"index": 1,
"id": 48,
"sepallengthcm": 4.6,
"sepalwidthcm": 3.2,
"unnamed:_3": 1.4,
"petalwidthcm": 0.2,
"species": "setosa"
},
{
"index": 2,
"id": 49,
"sepallengthcm": 5.3,
"sepalwidthcm": 3.7,
"unnamed:_3": 1.5,
"petalwidthcm": 0.2,
"species": "jennifer"
},
{
"index": 3,
"id": 50,
"sepallengthcm": 5.0,
"sepalwidthcm": 3.3,
"unnamed:_3": 1.4,
"petalwidthcm": 0.2,
"species": "setosa"
},
{
"index": 4,
"id": 97,
"sepallengthcm": 12.0,
"sepalwidthcm": 2.9,
"unnamed:_3": 4.2,
"petalwidthcm": 1.3,
"species": "jennifer"
},
{
"index": 5,
"id": 98,
"sepallengthcm": 6.2,
"sepalwidthcm": 2.9,
"unnamed:_3": 4.3,
"petalwidthcm": 1.3,
"species": "jennifer"
},
{
"index": 6,
"id": 99,
"sepallengthcm": 5.1,
"sepalwidthcm": 2.5,
"unnamed:_3": 3.0,
"petalwidthcm": 1.1,
"species": "kajol"
},
{
"index": 7,
"id": 100,
"sepallengthcm": 11.0,
"sepalwidthcm": 2.8,
"unnamed:_3": 7.0,
"petalwidthcm": 1.3,
"species": "floaw"
},
{
"index": 8,
"id": 101,
"sepallengthcm": 6.3,
"sepalwidthcm": 3.3,
"unnamed:_3": 6.0,
"petalwidthcm": 2.5,
"species": "Iris-flower"
},
{
"index": 9,
"id": 102,
"sepallengthcm": 5.8,
"sepalwidthcm": 2.7,
"unnamed:_3": 5.1,
"petalwidthcm": 1.9,
"species": "Iris-flower"
}
]
const groupByMultiple = (arr, category, value1, value2) => {
let result = Object.values(arr.reduce(function(r, e) {
let key = e[category];
if (!r[key]) r[key] = {...e, count: 1};
else {
let first_value = parseFloat(r[key][value1])
let second_value = parseFloat(r[key][value2])
first_value += parseFloat(e[value1]);
second_value += parseFloat(e[value2])
r[key][value1] = first_value;
r[key][value2] = second_value;
r[key]['count'] += 1;
}
return r;
}, {}));
return result.map(item => {
item[`average_${value1}`] = item[value1]/item.count;
item[`average_${value2}`] = item[value2]/item.count;
return item;
})
}
const ret = groupByMultiple(data, "species", "sepallengthcm", "sepalwidthcm");
console.log(ret);
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I am a beginner in coding and currently I'm trying to take the information from my json file and create a table in html. I'm using atom code editor and I am trying to get javascript to loop through all the data to make a table through using jQuery. I have tried to pull the information from my json file using jquery countless amounts of times but I seem to be doing something wrong. I've looked through plenty of forums and have tried different codes but none of them seem to work. The Json code is below. Thanks.
[
{
"Season": 2006-2007,
"Team": "P4two Ballers Osnabrueck",
"Games": 32,
"FG%": 65,
"FT%": 71,
"Assists": 4.5,
"Steals": 1.8,
"Blocks": 1.5,
"TRB": 11.9,
"Points Per Game": 16.7
},
{
"Season": 2007-2008,
"Team": "TG Renesas Landshut",
"Games": 26,
"FG%": 67,
"FT%": 68,
"Assists": 5,
"Steals": 1.2,
"Blocks": 0.8,
"TRB": 16.3,
"Points Per Game": 14.5
},
{
"Season": 2008-2009,
"Team": "Head Attack Erding",
"Games": 20,
"FG%": 69,
"FT%": 75,
"Assists": 6.2,
"Steals": 2.3,
"Blocks": 1.2,
"TRB": 17.1,
"Points Per Game": 12.8
},
{
"Season": 2009-2010,
"Team": "Deportivo Espanol de Talca",
"Games": 22,
"FG%": 66.5,
"FT%": 71,
"Assists": 4.1,
"Steals": 2,
"Blocks": 2,
"TRB": 11.6,
"Points Per Game": 16.8
},
{
"Season": 2011,
"Team": "Club Trouville Montevideo",
"Games": 8,
"FG%": 65,
"FT%": 75,
"Assists": 4.8,
"Steals": 3,
"Blocks": 1.8,
"TRB": 15,
"Points Per Game": 25
},
{
"Season": 2011-2012,
"Team": "San Isidro San Francisco",
"Games": 54,
"FG%": 62,
"FT%": 68,
"Assists": 4,
"Steals": 2.3,
"Blocks": 1.1,
"TRB": 13,
"Points Per Game": 12.5
},
{
"Season": 2012-2013,
"Team": "Club Providencia",
"Games": 48,
"FG%": 64.5,
"FT%": 70,
"Assists": 6,
"Steals": 3.8,
"Blocks": 2.1,
"TRB": 13,
"Points Per Game": 25
},
{
"Season": 2013,
"Team": "Academia de la Montana",
"Games": 17,
"FG%": 59.9,
"FT%": 62,
"Assists": 1.5,
"Steals": 1.2,
"Blocks": 1,
"TRB": 11.4,
"Points Per Game": 18.4
},
{
"Season": 2013-2014,
"Team": "Baskets Vilsbiburg",
"Games": 26,
"FG%": 59.3,
"FT%": 49.6,
"Assists": 1.5,
"Steals": 1.3,
"Blocks": 2,
"TRB": 14.8,
"Points Per Game": 24.7
},
{
"Season": 2015,
"Team": "Pirates de Bogota",
"Games": 20,
"FG%": 59.3,
"FT%": 54.8,
"Assists": 1.7,
"Steals": 2.3,
"Blocks": 0.7,
"TRB": 10.9,
"Points Per Game": 14.3
},
{
"Season": 2015-2016,
"Team": "CD Tinguiririca San Fernando",
"Games": 17,
"FG%": 56.8,
"FT%": 61.4,
"Assists": 1.1,
"Steals": 2.2,
"Blocks": 0.9,
"TRB": 11,
"Points Per Game": 13.1
},
{
"Season": 2016-2017,
"Team": "CD Universidad Catolica de Santiago",
"Games": 39,
"FG%": 48.1,
"FT%": 56.1,
"Assists": 1.8,
"Steals": 2.3,
"Blocks": 0.7,
"TRB": 11.6,
"Points Per Game": 15.2
}
{
"Career": " ",
"Team": " ",
"Games": 329,
"FG%": 66.8,
"FT%": 65.2,
"Assists": 3.5,
"Steals": 2.2,
"Blocks": 1.3,
"TRB": 13.1,
"Points Per Game": 17.4
}
]
Assuming you have a well-formatted JSON file, you can do It like this:
$(document).ready(function() {
// $.getJSON(url, callback);
$.getJSON('https://api.myjson.com/bins/aruak', function(json) {
tableGenerator('#tableName', json);
});
});
function tableGenerator(selector, data) { // data is an array
var keys = Object.keys(Object.assign({}, ...data));// Get the keys to make the header
// Add header
var head = '<thead><tr>';
keys.forEach(function(key) {
head += '<th>'+key+'</th>';
});
$(selector).append(head+'</tr></thead>');
// Add body
var body = '<tbody>';
data.forEach(function(obj) { // For each row
var row = '<tr>';
keys.forEach(function(key) { // For each column
row += '<td>';
if (obj.hasOwnProperty(key)) { // If the obj doesnt has a certain key, add a blank space.
row += obj[key];
}
row += '</td>';
});
body += row+'<tr>';
})
$(selector).append(body+'</tbody>');
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<table id="tableName"></table>