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>
Related
I have JSON given below. Using this JSON need to create the 3D Box inside the 3D outline cube as shown in given image.I have this requirement but i am new in 3D kind of development. It will be great if someone can help on this. We can use skus array to create cube. Thanks in advance.
{
"request_id": "614bd0e3de7f3745708a9fa4",
"completed_time_UTC": "2022-02-06T20:56:19Z",
"tracks": [
{[![enter image description here][1]][1]
"purchase_orders": ["1153511"],
"vehicle_id": "be8c578a-c59c-4348-8148-50cfbeb5a6cd",
"vehicle_type": "TRAILER_48T",
"number_of_pallets": 14,
"pallets": [
{
"purchase_orders": ["1153511"],
"pallet_id": "fe76b310-d751-48eb-84f8-3ea47c7a94bd",
"pallet_type": "BLANCA",
"number_of_skus": 65,
"skus": [
{
"sku": "17503006575454",
"length": 32,
"width": 27,
"height": 26,
"position": [0, 54, 26]
},
{
"sku": "17503006575454",
"length": 32,
"width": 27,
"height": 26,
"position": [0, 0, 26]
},
{
"sku": "17503006575454",
"length": 26,
"width": 27,
"height": 26,
"position": [64, 59, 78]
},
{},
{
"sku": "17503006575454",
"length": 32,
"width": 27,
"height": 26,
"position": [59, 54, 80]
}
]
},
{
"purchase_orders": ["1153511"],
"pallet_id": "e693e8bd-e841-4a05-8912-aa0e837ba256",
"pallet_type": "BLANCA",
"number_of_skus": 65,
"skus": [
{
"sku": "17503006575454",
"length": 32,
"width": 27,
"height": 26,
"position": [0, 0, 0]
},
{
"sku": "17503006575454",
"length": 32,
"width": 27,
"height": 26,
"position": [0, 0, 26]
},
{},
{
"sku": "17503006575454",
"length": 32,
"width": 27,
"height": 26,
"position": [58, 54, 78]
}
]
}
]
}
],
"schemaName": "http://www.schema.org/logistics/1"
}
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.
I am relatively new to Javascript, and just learned basic for loops and for in loops. How can I iterate over this object to get certain keys and values? there are a bunch of nested objects in objects, so i am kind of confused. I was thinking of using some sort of "Object...()" method, but not sure which one to use.
desired output outcome is an object with the given champion key, followed by the champion id/name = {"266": "Aatrox", "103" : "Ahri"}
example input below
"type": "champion",
"format": "standAloneComplex",
"version": "10.16.1",
"data": {
"Aatrox": {
"version": "10.16.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.1,
"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": "10.16.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": 20.88,
"armorperlevel": 3.5,
"spellblock": 30,
"spellblockperlevel": 0.5,
"attackrange": 550,
"hpregen": 6.5,
"hpregenperlevel": 0.6,
"mpregen": 8,
"mpregenperlevel": 0.8,
"crit": 0,
"critperlevel": 0,
"attackdamage": 53.04,
"attackdamageperlevel": 3,
"attackspeedperlevel": 2,
"attackspeed": 0.668
}
}```
const obj = {
name: 'Sam',
old: 30,
nested: {
data: 'ABC',
time: '3:15'
}
}
for(let i in obj){
console.log(i); //returns values
console.log(obj[i]); //returns keys
for(let j in obj[i]){
console.log(j); //returns values of nested 2d level
console.log(obj[i][j]); //returns keys of nested 2d level
}
}
This question already has answers here:
From an array of objects, extract value of a property as array
(24 answers)
How can I access and process nested objects, arrays, or JSON?
(31 answers)
Closed 4 years ago.
I have scraped this object using puppeteer but it contains more information than I actually need. How do I access "height" within "components"? I have been googling for a while and have not found a solution that works.
{
"components": [{
"height": "1.8",
"period": 11,
"trueDirection": 139,
"compassDirection": "SE"
}, {
"height": "5.5",
"period": 8,
"trueDirection": 72,
"compassDirection": "ENE"
}, {
"height": "1",
"period": 13,
"trueDirection": 207,
"compassDirection": "SSW"
}],
"unit": "ft",
"title": "2-3<small class=\"unit\">ft</small>\n",
"fadedRating": 0,
"solidRating": 1,
"time": "Noon",
"date": "Thu 14/02",
"isBigWave": false
}
To extract an array containing all the height values, use map like so:
const data = {
"components": [{
"height": "1.8",
"period": 11,
"trueDirection": 139,
"compassDirection": "SE"
}, {
"height": "5.5",
"period": 8,
"trueDirection": 72,
"compassDirection": "ENE"
}, {
"height": "1",
"period": 13,
"trueDirection": 207,
"compassDirection": "SSW"
}],
"unit": "ft",
"title": "2-3<small class=\"unit\">ft</small>\n",
"fadedRating": 0,
"solidRating": 1,
"time": "Noon",
"date": "Thu 14/02",
"isBigWave": false
};
const heights = data.components.map(e => e.height);
console.log(heights);
Here I use .forEach to iterate through the components array then you can access each height easily.
const obj = {
"components": [{
"height": "1.8",
"period": 11,
"trueDirection": 139,
"compassDirection": "SE"
}, {
"height": "5.5",
"period": 8,
"trueDirection": 72,
"compassDirection": "ENE"
}, {
"height": "1",
"period": 13,
"trueDirection": 207,
"compassDirection": "SSW"
}],
"unit": "ft",
"title": "2-3<small class='\\unit\\'>ft</small>\\n",
"fadedRating": 0,
"solidRating": 1,
"time": "Noon",
"date": "Thu 14/02",
"isBigWave": false
}
obj.components.forEach(c => console.log(c.height))
I use highcharts to plot and it works great. Right now I have a requirement to plot two charts and they are binding (in some sense) together.
I didn't find this in highcharts demo, the closest one plotting two charts in the same plot. Is there a name to call this? Is there any existed charting framework to handle this?
Based on your link and the embedded image, it's not exactly clear what you’re asking for. However, there are quite a few charting libraries that could likely accomplish what you're looking for. The examples below were built with ZingChart.
It seems you're looking for shared tooltips. The included code snippet demonstrates this. Run the snippet to see the chart.
var myChart = {
"graphset": [{
"type": "line",
"id": "chart1",
"legend": {
"shared": true,
"layout": "h"
},
"plotarea": {
"margin": "35 50"
},
"scaleX": {
"zooming": true
},
"zoom": {
"shared": true
},
"crosshair-x": {
"shared": true,
"plot-label": {
"multiple": false
}
},
"scaleY": {
},
"plot": {
},
"tooltip": {
"visible": false
},
"series": [{
"values": [69, 68, 54, 48, 70, 74, 98, 70, 72, 68, 49, 69],
"text": "Apple"
}, {
"values": [51, 53, 47, 60, 48, 52, 75, 52, 55, 47, 60, 48],
"text": "Microsoft"
}, {
"values": [42, 43, 30, 40, 31, 48, 55, 46, 48, 32, 38, 38],
"text": "Oracle"
}, {
"values": [25, 15, 26, 21, 24, 26, 33, 25, 15, 25, 22, 24],
"text": "Dell"
}]
}, {
"type": "line",
"id": "chart2",
"legend": {
"visible": false,
"shared": true
},
"plotarea": {
"margin": "35 50"
},
"scaleX": {
"zooming": true
},
"zoom": {
"shared": true
},
"scaleY": {
},
"crosshair-x": {
"shared": true,
"plot-label": {
"multiple": false,
"visible": false,
"offset-x": 15
}
},
"plot": {
},
"tooltip": {
"visible": false
},
"series": [{
"values": [79, 65, 34, 41, 40, 64, 95, 72, 78, 64, 59, 49],
"text": "Apple"
}, {
"values": [53, 63, 57, 50, 49, 57, 74, 62, 66, 57, 69, 68],
"text": "Microsoft"
}, {
"values": [42, 43, 30, 40, 31, 48, 55, 46, 48, 32, 38, 38],
"text": "Oracle"
}, {
"values": [25, 15, 26, 21, 24, 26, 33, 25, 15, 25, 22, 24],
"text": "Dell"
}]
}]
};
zingchart.render({
id: "myChart",
height: "300px",
width: "100%",
data: myChart
});
<script src="http://www.zingchart.com/playground/lib/zingchart/zingchart-html5-min.js"></script>
<div id="myChart"></div>
It also allows you to share information across multiple charts. (This uses a preview chart for zooming.)
If your concern is more for creating two charts in one plot without the shared tooltips, you can see an example of that here.
If you’d like to clarify what you’re trying to do, or know more about these demos, please feel free to message me or reach out to support#zingchart.com, I’m on the ZingChart team and happy to discuss.
you are probably looking for stock charts, amCharts would be a great alternative which is really easy to handle