Access elements of array within object [duplicate] - javascript

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))

Related

How to draw the 3D cube using Javascript or SVG with given JSON?

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"
}

How can I remove a level in a JSON file?

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.

How can I iterate over this object to to get a new object?

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
}
}

How to create csv/excel file from response data reactjs

I have response data like below:
{
"Aerospace": [
{
"id": 62,
"branch": "Aerospace",
"classification": "Einstufungen 2",
"theme": "Produktentwicklung",
"branch_id": 1,
"classification_id": 1,
"projectno": "510",
"project_id": 52,
"theme_id": 6,
"projectname": "test 22",
"comment": "",
"customername": "test 12",
"lead1id": 14,
"lead1name": "DateTest",
"lead1percent": "1000000000.0",
"lead2id": 11,
"lead2name": "logintest",
"lead2percent": "2000000000.0",
"lead3id": 16,
"lead3name": "jomo",
"lead3percent": "3000000000.0",
"leadplan_probability": "100.0",
"leadplan_plan2": "200.0",
"leadplan_plan3": "300.0",
"leadplan_addcosts": "500.0",
"leadplan_fee": "400.0",
"lead_plans": [
{
"id": 15,
"lead_id": 62,
"addcosts": "500.0",
"fee": "400.0",
"plan2": "200.0",
"plan3": "300.0",
"probability": "100.0",
"year": 2020
},
{
"id": 18,
"lead_id": 62,
"addcosts": "600.0",
"fee": "500.0",
"plan2": "200.0",
"plan3": "400.0",
"probability": "100.0",
"year": 2020
},
{
"id": 19,
"lead_id": 62,
"addcosts": "500.0",
"fee": "400.0",
"plan2": "200.0",
"plan3": "300.0",
"probability": "100.0",
"year": 2020
}
],
"offers": [
{
"id": 53,
"lead_id": 62,
"addcosts": "400.0",
"addcostsinfo": "test5",
"days": null,
"decision": "test6",
"decisiondate": "2020-05-29",
"fee": "200.0",
"mail": "test",
"offerdate": "2020-05-22",
"paper": "test"
}
]
},
{
"leadplan_plan2": 200,
"leadplan_plan3": 300,
"leadplan_addcosts": 500,
"leadplan_fee": 400
}
],
"Electrical": [
{
"id": 65,
"branch": "Electrical",
"classification": "Einstufungen 2",
"theme": "Sales",
"branch_id": 2,
"classification_id": 1,
"projectno": "12345",
"project_id": 53,
"theme_id": 5,
"projectname": "project12345",
"comment": "test",
"customername": "test123",
"lead1id": 1,
"lead1name": "alpha1",
"lead1percent": "100.0",
"lead2id": 53,
"lead2name": "newuser",
"lead2percent": "200.0",
"lead3id": 51,
"lead3name": "testisbah",
"lead3percent": "300.0",
"leadplan_probability": "1000.0",
"leadplan_plan2": "200.0",
"leadplan_plan3": "300.0",
"leadplan_addcosts": "500.0",
"leadplan_fee": "4000.0",
"lead_plans": [
{
"id": 16,
"lead_id": 65,
"addcosts": "500.0",
"fee": "4000.0",
"plan2": "200.0",
"plan3": "300.0",
"probability": "1000.0",
"year": 2020
},
{
"id": 22,
"lead_id": 65,
"addcosts": "800.0",
"fee": "700.0",
"plan2": "500.0",
"plan3": "600.0",
"probability": "400.0",
"year": 2023
}
],
"offers": [
{
"id": 52,
"lead_id": 65,
"addcosts": "400.0",
"addcostsinfo": "4",
"days": null,
"decision": "4",
"decisiondate": "2020-05-20",
"fee": "400.0",
"mail": "4",
"offerdate": "2020-05-20",
"paper": "4"
},
{
"id": 55,
"lead_id": 65,
"addcosts": "0.0",
"addcostsinfo": "",
"days": null,
"decision": "",
"decisiondate": "2020-05-13",
"fee": "0.0",
"mail": "",
"offerdate": "2020-05-14",
"paper": ""
},
{
"id": 57,
"lead_id": 65,
"addcosts": "0.0",
"addcostsinfo": "",
"days": null,
"decision": "",
"decisiondate": "2020-05-31",
"fee": "0.0",
"mail": "",
"offerdate": "2020-05-09",
"paper": ""
},
{
"id": 56,
"lead_id": 65,
"addcosts": "0.0",
"addcostsinfo": "",
"days": null,
"decision": "",
"decisiondate": "2020-05-30",
"fee": "100.0",
"mail": "",
"offerdate": "2020-05-14",
"paper": ""
},
{
"id": 58,
"lead_id": 65,
"addcosts": "0.0",
"addcostsinfo": "",
"days": null,
"decision": "",
"decisiondate": "2020-05-06",
"fee": "0.0",
"mail": "",
"offerdate": "2020-05-14",
"paper": ""
}
]
},
{
"leadplan_plan2": 200,
"leadplan_plan3": 300,
"leadplan_addcosts": 500,
"leadplan_fee": 4000
}
]
}
And I would like to create an excel or CSV file from it but problem is that my data loads first and excel utility gives error related to null empty.
Is there any reasonable excel npm package from which I can export my data to csv/excel using button click in ReactJs?
If I would be able to export my complete table, that would be good.
The result excel view would be like:

AngularJs object Sorting

I have JSON like this inside the main Array Object
obj = [{{"title":"1-Introduction"},
{"title":"5-Introduction"},
{"title":"20-Introduction"},
{"title":"4-Introduction"} }]
I want to sort the above object like
obj = [{{"title":"1-Introduction"},
{"title":"4-Introduction"},
{"title":"5-Introduction"},
{"title":"20-Introduction"} }]
what I have tried so far
$scope.checkWeightage=function(){
thisObj.scheduleSubject.map(itm=>itm.sectionRange.map(subItm=>{
var min = subItm.chapterActualWeightage-(subItm.chapterActualWeightage/10);
var max = subItm.chapterActualWeightage+(subItm.chapterActualWeightage/10);
var sum = subItm.items.reduce((total,it)=>{
return total+it.actualWeightage;
},0);
subItm['weightageError'] = (sum>max || sum<min)?true:false;
subItm['ChapterActualWeightageCurrently'] = parseFloat(Math.round(sum*100)/100);
subItm.items.sort((a,b)=>a.title.split(/_(.+)/)[0]>b.title.split(/_(.+)/)[0]);
})
); console.log(thisObj.scheduleSubject[0].chapterData); //.1[0].title);
//console.log("CHECK weightage",thisObj.scheduleSubject);
}
How to track title on my main Array
alert(thisObj.scheduleSubject[0].sectionRange[0].items[0].title);
I want to sort all the items on the base of its title digits before - character example 1- , 2- ,3- ,4-, 5-, 6-, 21-,56- and so on.
Main Array Structure
[
{
"id": "25",
"section": "1",
"sectionRange": [
{
"sectionNumber": 1,
"effectAllowed": "all",
"Date": "",
"items": [
{
"subjectId": 25,
"section": 1,
"chapterId": 283,
"actualWeightage": 3.42,
"totalPaperMarks": 132,
"title": "10-Creation & Registration of Charges",
"$$hashKey": "object:146"
},
{
"subjectId": 25,
"section": 1,
"chapterId": 284,
"actualWeightage": 2.23,
"totalPaperMarks": 132,
"title": "11-Allotment of Securities & Issue of Certificates",
"$$hashKey": "object:147"
},
{
"subjectId": 25,
"section": 1,
"chapterId": 285,
"actualWeightage": 1.37,
"totalPaperMarks": 132,
"title": "12-Membership in a Company",
"$$hashKey": "object:148"
},
{
"subjectId": 25,
"section": 1,
"chapterId": 286,
"actualWeightage": 3.42,
"totalPaperMarks": 132,
"title": "13-Transfer & Transmission of Securities",
"$$hashKey": "object:149"
},
{
"subjectId": 25,
"section": 1,
"chapterId": 287,
"actualWeightage": 7.53,
"totalPaperMarks": 132,
"title": "14-Institution of Directors",
"$$hashKey": "object:150"
},
{
"subjectId": 25,
"section": 1,
"chapterId": 288,
"actualWeightage": 1.37,
"totalPaperMarks": 132,
"title": "15-Independent Directors",
"$$hashKey": "object:151"
},
{
"subjectId": 25,
"section": 1,
"chapterId": 289,
"actualWeightage": 13.35,
"totalPaperMarks": 132,
"title": "16-Board & its Powers",
"$$hashKey": "object:152"
},
{
"subjectId": 25,
"section": 1,
"chapterId": 290,
"actualWeightage": 8.22,
"totalPaperMarks": 132,
"title": "17-Appointment & Remuneration of Key Managerial Personnel",
"$$hashKey": "object:153"
},
{
"subjectId": 25,
"section": 1,
"chapterId": 291,
"actualWeightage": 6.68,
"totalPaperMarks": 132,
"title": "18-General Meetings",
"$$hashKey": "object:154"
},
{
"subjectId": 25,
"section": 1,
"chapterId": 292,
"actualWeightage": 1.37,
"totalPaperMarks": 132,
"title": "19-Loans & Investments by Companies",
"$$hashKey": "object:155"
}

You can split on that char and sort via that (assuming your main data structure is named structure:
structure.forEach(s => {
s.sectionRange.forEach(sr => {
sr.items.sort(function(a, b) {
let aParts = a.split("-"),
bParts = b.split("-");
return +aParts[0] - +bParts[0];
});
});
});

Just extract those number values and let orderBy filter of angularjs do the job for you
JS
$scope.getNumber = function(row){
var value = row.title.split("-")[0];
return parseInt(value);
};
html
<div ng-repeat="item in data | orderBy:getNumber:false">{{item.title}}</div>
also orderBy takes a second parameter (true / false) for asc / desc ordering
Demo

You can use a Array.prototype.sort with a simple sort function in which you parse the title value of each object in the array as an int and compare. Something like this:
var arr = [{
"title": "1-Introduction"
},
{
"title": "5-Introduction"
},
{
"title": "20-Introduction"
},
{
"title": "4-Introduction"
}
];
arr.sort(function(a, b) {
const aVal = parseInt(a.title.split("-")[0]);
const bVal = parseInt(b.title.split("-")[0]);
return aVal - bVal;
});
console.log(arr);

Categories