Unable store the objects into an array in javascript [duplicate] - javascript

This question already has answers here:
Push Object in Array [duplicate]
(2 answers)
Does JavaScript pass by reference? [duplicate]
(13 answers)
Closed 3 years ago.
I'm trying to store the objects into Javascript array.
var res=[
{name:'Alex',place:'US',age:20},
{name:'Jason',place:'Canada',age:25}
];
var obj={};
var data=[];
for ( let i in res){
obj.name=res[i].name;
obj.place=res[i].place;
data.push(obj);
}
console.log(data);
My expected output:
[
{name:'Alex',place:'US'}.
{name:'Jason',place:'Canada'}
]
Actual output I got:
[
{name:'Jason',place:'Canada'},
{name:'Jason',place:'Canada' }
]
Why I'm getting this type of output?
I'm noobie.Please help me.

You only have one object in memory with your var obj={}; - that line runs once, and creates one object in memory, which you then proceed to mutate on every iteration in the for loop, and push to the array. At the end, the array contains 2 references to the same object.
Create the object inside the loop instead:
for ( let i in res){
var obj = {};
obj.name=res[i].name;
obj.place=res[i].place;
data.push(obj);
}
You could also consider using .map instead:
const res=[
{name:'Alex',place:'US',age:20},
{name:'Jason',place:'Canada',age:25}
];
const data = res.map(({ name, place }) => ({ name, place }));
console.log(data);

You are basically updating the same object again and again in your loop. You need to have different objects for each loop. Hence, you need to move var obj={} inside the for loop.
var res=[{name:'Alex',place:'US',age:20},{name:'Jason',place:'Canada',age:25}];
var data=[];
for ( let i in res){
var obj={};
obj.name=res[i].name;
obj.place=res[i].place;
data.push(obj);
}
console.log(data);

Using .map would be much easier
var res=[
{name:'Alex',place:'US',age:20},
{name:'Jason',place:'Canada',age:25}
];
var obj={};
var data = res.map(({ name, place }) => {
return ({ name, place })
});
console.log(data);

Related

How to append JSON object to JSON object? [duplicate]

This question already has an answer here:
Dynamic object property names?
(1 answer)
Closed 8 months ago.
so i have this JSON file:
{"fjord-200-200.jpg":[]}
I read it using
let data = fs.readFileSync(cachedName);
let cachedInJSON: JSON = JSON.parse(data.toString());
so i have now JSON object, that i want to append to this new JSON object
let newData = {
fileNameFormatted: []
}
when i tried using
let newJson = {...cachedInJSON, ...newData}
Result was this:
{"fjord-200-200.jpg":[],"fileNameFormatted":[]}
Wanted result that i want to achieve is:
{"fjord-200-200.jpg":[],"fjord-300-300.jpg":[]}
fileNameFormatted is a variable holding fjord-300-300.jpg
let newData = {
[fileNameFormatted]: [] // Notice the brackets around the key
}

Make key value pair from two different array [duplicate]

This question already has answers here:
Merge keys array and values array into an object in JavaScript
(14 answers)
Closed 1 year ago.
I'm using local storage to get an arrays of strings,
First value attrIds is as follows,
var attrIds = localStorage.getItem('attributeids');
attrIds = JSON.parse(attrIds);
Second value confOptions is as follows,
I want something like this,
144: "5595"
93: "5487"
I have tried creating a loop inside the loop and tried to set the key and value but it's not working. I have also tried to set the single JSON object as key and setting value as '' but couldn't move further with that.
Does anyone have any idea regarding this?
You can accomplish this using a simple for loop, accessing the items from the arrays, and assigning properties to an empty object.
const keys = ['144', '93'];
const values = ['5595', '5487'];
const obj = {};
for (let i = 0; i < keys.length; i++) {
obj[keys[i]] = values[i];
}
console.log(obj); // prints { 144: '5595', 93: '5487' }
Create a nested array and then use Object.fromEntries().
const
a = ["144", "93"],
b = ["5595", "5487"],
c = Object.fromEntries(a.map((v, i) => [v, b[i]]));
console.log(c);
Using a for loop, you could do something like:
var attrIds = localStorage.getItem('attributeids');
attrIds = JSON.parse(attrIds);
confOptions = ["5595", "5487"]
const object = {};
for(let i=0; i<attrIds.length;i++)
object[attrIds[i]] = confOptions[i]

How to merge strings from forEach loop to an array [duplicate]

This question already has answers here:
From an array of objects, extract value of a property as array
(24 answers)
Closed 3 years ago.
Here is my code. (sorry about ugly json data)
var data = [{"ImageSets":[{"ImageSet":[{"$":{"Category":"variant"},"SwatchImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41NeQS3RMzL._SL30_.jpg"],"Height":[{"_":"30","$":{"Units":"pixels"}}],"Width":[{"_":"30","$":{"Units":"pixels"}}]}],"SmallImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41NeQS3RMzL._SL75_.jpg"],"Height":[{"_":"75","$":{"Units":"pixels"}}],"Width":[{"_":"75","$":{"Units":"pixels"}}]}],"ThumbnailImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41NeQS3RMzL._SL75_.jpg"],"Height":[{"_":"75","$":{"Units":"pixels"}}],"Width":[{"_":"75","$":{"Units":"pixels"}}]}],"TinyImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41NeQS3RMzL._SL110_.jpg"],"Height":[{"_":"110","$":{"Units":"pixels"}}],"Width":[{"_":"110","$":{"Units":"pixels"}}]}],"MediumImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41NeQS3RMzL._SL160_.jpg"],"Height":[{"_":"160","$":{"Units":"pixels"}}],"Width":[{"_":"160","$":{"Units":"pixels"}}]}],"LargeImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41NeQS3RMzL.jpg"],"Height":[{"_":"500","$":{"Units":"pixels"}}],"Width":[{"_":"500","$":{"Units":"pixels"}}]}],"HiResImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/81OWhCeCRtL.jpg"],"Height":[{"_":"2560","$":{"Units":"pixels"}}],"Width":[{"_":"2560","$":{"Units":"pixels"}}]}]},{"$":{"Category":"variant"},"SwatchImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/316W1tHrMuL._SL30_.jpg"],"Height":[{"_":"30","$":{"Units":"pixels"}}],"Width":[{"_":"30","$":{"Units":"pixels"}}]}],"SmallImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/316W1tHrMuL._SL75_.jpg"],"Height":[{"_":"75","$":{"Units":"pixels"}}],"Width":[{"_":"75","$":{"Units":"pixels"}}]}],"ThumbnailImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/316W1tHrMuL._SL75_.jpg"],"Height":[{"_":"75","$":{"Units":"pixels"}}],"Width":[{"_":"75","$":{"Units":"pixels"}}]}],"TinyImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/316W1tHrMuL._SL110_.jpg"],"Height":[{"_":"110","$":{"Units":"pixels"}}],"Width":[{"_":"110","$":{"Units":"pixels"}}]}],"MediumImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/316W1tHrMuL._SL160_.jpg"],"Height":[{"_":"160","$":{"Units":"pixels"}}],"Width":[{"_":"160","$":{"Units":"pixels"}}]}],"LargeImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/316W1tHrMuL.jpg"],"Height":[{"_":"500","$":{"Units":"pixels"}}],"Width":[{"_":"500","$":{"Units":"pixels"}}]}],"HiResImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/71e4eChoGzL.jpg"],"Height":[{"_":"2560","$":{"Units":"pixels"}}],"Width":[{"_":"2560","$":{"Units":"pixels"}}]}]},{"$":{"Category":"variant"},"SwatchImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/31TgrPVXYjL._SL30_.jpg"],"Height":[{"_":"30","$":{"Units":"pixels"}}],"Width":[{"_":"30","$":{"Units":"pixels"}}]}],"SmallImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/31TgrPVXYjL._SL75_.jpg"],"Height":[{"_":"75","$":{"Units":"pixels"}}],"Width":[{"_":"75","$":{"Units":"pixels"}}]}],"ThumbnailImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/31TgrPVXYjL._SL75_.jpg"],"Height":[{"_":"75","$":{"Units":"pixels"}}],"Width":[{"_":"75","$":{"Units":"pixels"}}]}],"TinyImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/31TgrPVXYjL._SL110_.jpg"],"Height":[{"_":"110","$":{"Units":"pixels"}}],"Width":[{"_":"110","$":{"Units":"pixels"}}]}],"MediumImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/31TgrPVXYjL._SL160_.jpg"],"Height":[{"_":"160","$":{"Units":"pixels"}}],"Width":[{"_":"160","$":{"Units":"pixels"}}]}],"LargeImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/31TgrPVXYjL.jpg"],"Height":[{"_":"500","$":{"Units":"pixels"}}],"Width":[{"_":"500","$":{"Units":"pixels"}}]}],"HiResImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/71qsXsLLRWL.jpg"],"Height":[{"_":"2560","$":{"Units":"pixels"}}],"Width":[{"_":"2560","$":{"Units":"pixels"}}]}]},{"$":{"Category":"variant"},"SwatchImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/51qcfjgaAZL._SL30_.jpg"],"Height":[{"_":"30","$":{"Units":"pixels"}}],"Width":[{"_":"30","$":{"Units":"pixels"}}]}],"SmallImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/51qcfjgaAZL._SL75_.jpg"],"Height":[{"_":"75","$":{"Units":"pixels"}}],"Width":[{"_":"75","$":{"Units":"pixels"}}]}],"ThumbnailImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/51qcfjgaAZL._SL75_.jpg"],"Height":[{"_":"75","$":{"Units":"pixels"}}],"Width":[{"_":"75","$":{"Units":"pixels"}}]}],"TinyImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/51qcfjgaAZL._SL110_.jpg"],"Height":[{"_":"110","$":{"Units":"pixels"}}],"Width":[{"_":"110","$":{"Units":"pixels"}}]}],"MediumImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/51qcfjgaAZL._SL160_.jpg"],"Height":[{"_":"160","$":{"Units":"pixels"}}],"Width":[{"_":"160","$":{"Units":"pixels"}}]}],"LargeImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/51qcfjgaAZL.jpg"],"Height":[{"_":"500","$":{"Units":"pixels"}}],"Width":[{"_":"500","$":{"Units":"pixels"}}]}],"HiResImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/91hyvNK4stL.jpg"],"Height":[{"_":"2560","$":{"Units":"pixels"}}],"Width":[{"_":"2560","$":{"Units":"pixels"}}]}]},{"$":{"Category":"variant"},"SwatchImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41numbb3sgL._SL30_.jpg"],"Height":[{"_":"30","$":{"Units":"pixels"}}],"Width":[{"_":"30","$":{"Units":"pixels"}}]}],"SmallImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41numbb3sgL._SL75_.jpg"],"Height":[{"_":"75","$":{"Units":"pixels"}}],"Width":[{"_":"75","$":{"Units":"pixels"}}]}],"ThumbnailImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41numbb3sgL._SL75_.jpg"],"Height":[{"_":"75","$":{"Units":"pixels"}}],"Width":[{"_":"75","$":{"Units":"pixels"}}]}],"TinyImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41numbb3sgL._SL110_.jpg"],"Height":[{"_":"110","$":{"Units":"pixels"}}],"Width":[{"_":"110","$":{"Units":"pixels"}}]}],"MediumImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41numbb3sgL._SL160_.jpg"],"Height":[{"_":"160","$":{"Units":"pixels"}}],"Width":[{"_":"160","$":{"Units":"pixels"}}]}],"LargeImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41numbb3sgL.jpg"],"Height":[{"_":"500","$":{"Units":"pixels"}}],"Width":[{"_":"500","$":{"Units":"pixels"}}]}],"HiResImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/816DOkjvgKL.jpg"],"Height":[{"_":"2560","$":{"Units":"pixels"}}],"Width":[{"_":"2560","$":{"Units":"pixels"}}]}]},{"$":{"Category":"variant"},"SwatchImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41PLx0E2sqL._SL30_.jpg"],"Height":[{"_":"30","$":{"Units":"pixels"}}],"Width":[{"_":"30","$":{"Units":"pixels"}}]}],"SmallImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41PLx0E2sqL._SL75_.jpg"],"Height":[{"_":"75","$":{"Units":"pixels"}}],"Width":[{"_":"75","$":{"Units":"pixels"}}]}],"ThumbnailImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41PLx0E2sqL._SL75_.jpg"],"Height":[{"_":"75","$":{"Units":"pixels"}}],"Width":[{"_":"75","$":{"Units":"pixels"}}]}],"TinyImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41PLx0E2sqL._SL110_.jpg"],"Height":[{"_":"110","$":{"Units":"pixels"}}],"Width":[{"_":"110","$":{"Units":"pixels"}}]}],"MediumImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41PLx0E2sqL._SL160_.jpg"],"Height":[{"_":"160","$":{"Units":"pixels"}}],"Width":[{"_":"160","$":{"Units":"pixels"}}]}],"LargeImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41PLx0E2sqL.jpg"],"Height":[{"_":"500","$":{"Units":"pixels"}}],"Width":[{"_":"500","$":{"Units":"pixels"}}]}],"HiResImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/819xXjN-ghL.jpg"],"Height":[{"_":"2560","$":{"Units":"pixels"}}],"Width":[{"_":"2560","$":{"Units":"pixels"}}]}]},{"$":{"Category":"primary"},"SwatchImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41bz4b5IbLL._SL30_.jpg"],"Height":[{"_":"30","$":{"Units":"pixels"}}],"Width":[{"_":"30","$":{"Units":"pixels"}}]}],"SmallImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41bz4b5IbLL._SL75_.jpg"],"Height":[{"_":"75","$":{"Units":"pixels"}}],"Width":[{"_":"75","$":{"Units":"pixels"}}]}],"ThumbnailImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41bz4b5IbLL._SL75_.jpg"],"Height":[{"_":"75","$":{"Units":"pixels"}}],"Width":[{"_":"75","$":{"Units":"pixels"}}]}],"TinyImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41bz4b5IbLL._SL110_.jpg"],"Height":[{"_":"110","$":{"Units":"pixels"}}],"Width":[{"_":"110","$":{"Units":"pixels"}}]}],"MediumImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41bz4b5IbLL._SL160_.jpg"],"Height":[{"_":"160","$":{"Units":"pixels"}}],"Width":[{"_":"160","$":{"Units":"pixels"}}]}],"LargeImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41bz4b5IbLL.jpg"],"Height":[{"_":"500","$":{"Units":"pixels"}}],"Width":[{"_":"500","$":{"Units":"pixels"}}]}],"HiResImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/71-w1EWOaWL.jpg"],"Height":[{"_":"2560","$":{"Units":"pixels"}}],"Width":[{"_":"2560","$":{"Units":"pixels"}}]}]}]}]}]
data[0].ImageSets[0].ImageSet.forEach((image) => {
var images = image.LargeImage[0].URL[0]
console.log(images)
})
I'm getting all URL's in console log.
I tried to merge them with split() but it's not working. Each string is getting its own array. Similarly if i use var images = image.LargeImage[0].URL. Each string return it's own array.
What i want is a single array with all URL's like this.
["https://images-na.ssl-images-amazon.com/images/I/41NeQS3RMzL.jpg", "https://images-na.ssl-images-amazon.com/images/I/316W1tHrMuL.jpg", "https://images-na.ssl-images-amazon.com/images/I/31TgrPVXYjL.jpg", "https://images-na.ssl-images-amazon.com/images/I/51qcfjgaAZL.jpg", "https://images-na.ssl-images-amazon.com/images/I/41numbb3sgL.jpg", "https://images-na.ssl-images-amazon.com/images/I/41PLx0E2sqL.jpg","https://images-na.ssl-images-amazon.com/images/I/41bz4b5IbLL.jpg"]
Thanks.
It makes more sense here to just use .map(), as it will create a new Array with the return value of each iteration
var data=[{ImageSets:[{ImageSet:[{$:{Category:"variant"},SwatchImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41NeQS3RMzL._SL30_.jpg"],Height:[{_:"30",$:{Units:"pixels"}}],Width:[{_:"30",$:{Units:"pixels"}}]}],SmallImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41NeQS3RMzL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],ThumbnailImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41NeQS3RMzL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],TinyImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41NeQS3RMzL._SL110_.jpg"],Height:[{_:"110",$:{Units:"pixels"}}],Width:[{_:"110",$:{Units:"pixels"}}]}],MediumImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41NeQS3RMzL._SL160_.jpg"],Height:[{_:"160",$:{Units:"pixels"}}],Width:[{_:"160",$:{Units:"pixels"}}]}],LargeImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41NeQS3RMzL.jpg"],Height:[{_:"500",$:{Units:"pixels"}}],Width:[{_:"500",$:{Units:"pixels"}}]}],HiResImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/81OWhCeCRtL.jpg"],Height:[{_:"2560",$:{Units:"pixels"}}],Width:[{_:"2560",$:{Units:"pixels"}}]}]},{$:{Category:"variant"},SwatchImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/316W1tHrMuL._SL30_.jpg"],Height:[{_:"30",$:{Units:"pixels"}}],Width:[{_:"30",$:{Units:"pixels"}}]}],SmallImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/316W1tHrMuL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],ThumbnailImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/316W1tHrMuL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],TinyImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/316W1tHrMuL._SL110_.jpg"],Height:[{_:"110",$:{Units:"pixels"}}],Width:[{_:"110",$:{Units:"pixels"}}]}],MediumImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/316W1tHrMuL._SL160_.jpg"],Height:[{_:"160",$:{Units:"pixels"}}],Width:[{_:"160",$:{Units:"pixels"}}]}],LargeImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/316W1tHrMuL.jpg"],Height:[{_:"500",$:{Units:"pixels"}}],Width:[{_:"500",$:{Units:"pixels"}}]}],HiResImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/71e4eChoGzL.jpg"],Height:[{_:"2560",$:{Units:"pixels"}}],Width:[{_:"2560",$:{Units:"pixels"}}]}]},{$:{Category:"variant"},SwatchImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/31TgrPVXYjL._SL30_.jpg"],Height:[{_:"30",$:{Units:"pixels"}}],Width:[{_:"30",$:{Units:"pixels"}}]}],SmallImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/31TgrPVXYjL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],ThumbnailImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/31TgrPVXYjL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],TinyImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/31TgrPVXYjL._SL110_.jpg"],Height:[{_:"110",$:{Units:"pixels"}}],Width:[{_:"110",$:{Units:"pixels"}}]}],MediumImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/31TgrPVXYjL._SL160_.jpg"],Height:[{_:"160",$:{Units:"pixels"}}],Width:[{_:"160",$:{Units:"pixels"}}]}],LargeImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/31TgrPVXYjL.jpg"],Height:[{_:"500",$:{Units:"pixels"}}],Width:[{_:"500",$:{Units:"pixels"}}]}],HiResImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/71qsXsLLRWL.jpg"],Height:[{_:"2560",$:{Units:"pixels"}}],Width:[{_:"2560",$:{Units:"pixels"}}]}]},{$:{Category:"variant"},SwatchImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/51qcfjgaAZL._SL30_.jpg"],Height:[{_:"30",$:{Units:"pixels"}}],Width:[{_:"30",$:{Units:"pixels"}}]}],SmallImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/51qcfjgaAZL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],ThumbnailImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/51qcfjgaAZL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],TinyImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/51qcfjgaAZL._SL110_.jpg"],Height:[{_:"110",$:{Units:"pixels"}}],Width:[{_:"110",$:{Units:"pixels"}}]}],MediumImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/51qcfjgaAZL._SL160_.jpg"],Height:[{_:"160",$:{Units:"pixels"}}],Width:[{_:"160",$:{Units:"pixels"}}]}],LargeImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/51qcfjgaAZL.jpg"],Height:[{_:"500",$:{Units:"pixels"}}],Width:[{_:"500",$:{Units:"pixels"}}]}],HiResImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/91hyvNK4stL.jpg"],Height:[{_:"2560",$:{Units:"pixels"}}],Width:[{_:"2560",$:{Units:"pixels"}}]}]},{$:{Category:"variant"},SwatchImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41numbb3sgL._SL30_.jpg"],Height:[{_:"30",$:{Units:"pixels"}}],Width:[{_:"30",$:{Units:"pixels"}}]}],SmallImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41numbb3sgL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],ThumbnailImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41numbb3sgL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],TinyImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41numbb3sgL._SL110_.jpg"],Height:[{_:"110",$:{Units:"pixels"}}],Width:[{_:"110",$:{Units:"pixels"}}]}],MediumImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41numbb3sgL._SL160_.jpg"],Height:[{_:"160",$:{Units:"pixels"}}],Width:[{_:"160",$:{Units:"pixels"}}]}],LargeImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41numbb3sgL.jpg"],Height:[{_:"500",$:{Units:"pixels"}}],Width:[{_:"500",$:{Units:"pixels"}}]}],HiResImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/816DOkjvgKL.jpg"],Height:[{_:"2560",$:{Units:"pixels"}}],Width:[{_:"2560",$:{Units:"pixels"}}]}]},{$:{Category:"variant"},SwatchImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41PLx0E2sqL._SL30_.jpg"],Height:[{_:"30",$:{Units:"pixels"}}],Width:[{_:"30",$:{Units:"pixels"}}]}],SmallImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41PLx0E2sqL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],ThumbnailImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41PLx0E2sqL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],TinyImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41PLx0E2sqL._SL110_.jpg"],Height:[{_:"110",$:{Units:"pixels"}}],Width:[{_:"110",$:{Units:"pixels"}}]}],MediumImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41PLx0E2sqL._SL160_.jpg"],Height:[{_:"160",$:{Units:"pixels"}}],Width:[{_:"160",$:{Units:"pixels"}}]}],LargeImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41PLx0E2sqL.jpg"],Height:[{_:"500",$:{Units:"pixels"}}],Width:[{_:"500",$:{Units:"pixels"}}]}],HiResImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/819xXjN-ghL.jpg"],Height:[{_:"2560",$:{Units:"pixels"}}],Width:[{_:"2560",$:{Units:"pixels"}}]}]},{$:{Category:"primary"},SwatchImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41bz4b5IbLL._SL30_.jpg"],Height:[{_:"30",$:{Units:"pixels"}}],Width:[{_:"30",$:{Units:"pixels"}}]}],SmallImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41bz4b5IbLL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],ThumbnailImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41bz4b5IbLL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],TinyImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41bz4b5IbLL._SL110_.jpg"],Height:[{_:"110",$:{Units:"pixels"}}],Width:[{_:"110",$:{Units:"pixels"}}]}],MediumImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41bz4b5IbLL._SL160_.jpg"],Height:[{_:"160",$:{Units:"pixels"}}],Width:[{_:"160",$:{Units:"pixels"}}]}],LargeImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41bz4b5IbLL.jpg"],Height:[{_:"500",$:{Units:"pixels"}}],Width:[{_:"500",$:{Units:"pixels"}}]}],HiResImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/71-w1EWOaWL.jpg"],Height:[{_:"2560",$:{Units:"pixels"}}],Width:[{_:"2560",$:{Units:"pixels"}}]}]}]}]}];
let urlsArray = data[0].ImageSets[0].ImageSet.map((image) => {
return image.LargeImage[0].URL[0];
});
console.log(urlsArray);
This is how you would do it with .forEach(), additionally
var data=[{ImageSets:[{ImageSet:[{$:{Category:"variant"},SwatchImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41NeQS3RMzL._SL30_.jpg"],Height:[{_:"30",$:{Units:"pixels"}}],Width:[{_:"30",$:{Units:"pixels"}}]}],SmallImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41NeQS3RMzL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],ThumbnailImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41NeQS3RMzL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],TinyImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41NeQS3RMzL._SL110_.jpg"],Height:[{_:"110",$:{Units:"pixels"}}],Width:[{_:"110",$:{Units:"pixels"}}]}],MediumImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41NeQS3RMzL._SL160_.jpg"],Height:[{_:"160",$:{Units:"pixels"}}],Width:[{_:"160",$:{Units:"pixels"}}]}],LargeImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41NeQS3RMzL.jpg"],Height:[{_:"500",$:{Units:"pixels"}}],Width:[{_:"500",$:{Units:"pixels"}}]}],HiResImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/81OWhCeCRtL.jpg"],Height:[{_:"2560",$:{Units:"pixels"}}],Width:[{_:"2560",$:{Units:"pixels"}}]}]},{$:{Category:"variant"},SwatchImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/316W1tHrMuL._SL30_.jpg"],Height:[{_:"30",$:{Units:"pixels"}}],Width:[{_:"30",$:{Units:"pixels"}}]}],SmallImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/316W1tHrMuL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],ThumbnailImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/316W1tHrMuL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],TinyImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/316W1tHrMuL._SL110_.jpg"],Height:[{_:"110",$:{Units:"pixels"}}],Width:[{_:"110",$:{Units:"pixels"}}]}],MediumImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/316W1tHrMuL._SL160_.jpg"],Height:[{_:"160",$:{Units:"pixels"}}],Width:[{_:"160",$:{Units:"pixels"}}]}],LargeImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/316W1tHrMuL.jpg"],Height:[{_:"500",$:{Units:"pixels"}}],Width:[{_:"500",$:{Units:"pixels"}}]}],HiResImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/71e4eChoGzL.jpg"],Height:[{_:"2560",$:{Units:"pixels"}}],Width:[{_:"2560",$:{Units:"pixels"}}]}]},{$:{Category:"variant"},SwatchImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/31TgrPVXYjL._SL30_.jpg"],Height:[{_:"30",$:{Units:"pixels"}}],Width:[{_:"30",$:{Units:"pixels"}}]}],SmallImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/31TgrPVXYjL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],ThumbnailImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/31TgrPVXYjL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],TinyImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/31TgrPVXYjL._SL110_.jpg"],Height:[{_:"110",$:{Units:"pixels"}}],Width:[{_:"110",$:{Units:"pixels"}}]}],MediumImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/31TgrPVXYjL._SL160_.jpg"],Height:[{_:"160",$:{Units:"pixels"}}],Width:[{_:"160",$:{Units:"pixels"}}]}],LargeImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/31TgrPVXYjL.jpg"],Height:[{_:"500",$:{Units:"pixels"}}],Width:[{_:"500",$:{Units:"pixels"}}]}],HiResImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/71qsXsLLRWL.jpg"],Height:[{_:"2560",$:{Units:"pixels"}}],Width:[{_:"2560",$:{Units:"pixels"}}]}]},{$:{Category:"variant"},SwatchImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/51qcfjgaAZL._SL30_.jpg"],Height:[{_:"30",$:{Units:"pixels"}}],Width:[{_:"30",$:{Units:"pixels"}}]}],SmallImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/51qcfjgaAZL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],ThumbnailImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/51qcfjgaAZL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],TinyImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/51qcfjgaAZL._SL110_.jpg"],Height:[{_:"110",$:{Units:"pixels"}}],Width:[{_:"110",$:{Units:"pixels"}}]}],MediumImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/51qcfjgaAZL._SL160_.jpg"],Height:[{_:"160",$:{Units:"pixels"}}],Width:[{_:"160",$:{Units:"pixels"}}]}],LargeImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/51qcfjgaAZL.jpg"],Height:[{_:"500",$:{Units:"pixels"}}],Width:[{_:"500",$:{Units:"pixels"}}]}],HiResImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/91hyvNK4stL.jpg"],Height:[{_:"2560",$:{Units:"pixels"}}],Width:[{_:"2560",$:{Units:"pixels"}}]}]},{$:{Category:"variant"},SwatchImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41numbb3sgL._SL30_.jpg"],Height:[{_:"30",$:{Units:"pixels"}}],Width:[{_:"30",$:{Units:"pixels"}}]}],SmallImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41numbb3sgL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],ThumbnailImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41numbb3sgL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],TinyImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41numbb3sgL._SL110_.jpg"],Height:[{_:"110",$:{Units:"pixels"}}],Width:[{_:"110",$:{Units:"pixels"}}]}],MediumImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41numbb3sgL._SL160_.jpg"],Height:[{_:"160",$:{Units:"pixels"}}],Width:[{_:"160",$:{Units:"pixels"}}]}],LargeImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41numbb3sgL.jpg"],Height:[{_:"500",$:{Units:"pixels"}}],Width:[{_:"500",$:{Units:"pixels"}}]}],HiResImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/816DOkjvgKL.jpg"],Height:[{_:"2560",$:{Units:"pixels"}}],Width:[{_:"2560",$:{Units:"pixels"}}]}]},{$:{Category:"variant"},SwatchImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41PLx0E2sqL._SL30_.jpg"],Height:[{_:"30",$:{Units:"pixels"}}],Width:[{_:"30",$:{Units:"pixels"}}]}],SmallImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41PLx0E2sqL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],ThumbnailImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41PLx0E2sqL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],TinyImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41PLx0E2sqL._SL110_.jpg"],Height:[{_:"110",$:{Units:"pixels"}}],Width:[{_:"110",$:{Units:"pixels"}}]}],MediumImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41PLx0E2sqL._SL160_.jpg"],Height:[{_:"160",$:{Units:"pixels"}}],Width:[{_:"160",$:{Units:"pixels"}}]}],LargeImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41PLx0E2sqL.jpg"],Height:[{_:"500",$:{Units:"pixels"}}],Width:[{_:"500",$:{Units:"pixels"}}]}],HiResImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/819xXjN-ghL.jpg"],Height:[{_:"2560",$:{Units:"pixels"}}],Width:[{_:"2560",$:{Units:"pixels"}}]}]},{$:{Category:"primary"},SwatchImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41bz4b5IbLL._SL30_.jpg"],Height:[{_:"30",$:{Units:"pixels"}}],Width:[{_:"30",$:{Units:"pixels"}}]}],SmallImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41bz4b5IbLL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],ThumbnailImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41bz4b5IbLL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],TinyImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41bz4b5IbLL._SL110_.jpg"],Height:[{_:"110",$:{Units:"pixels"}}],Width:[{_:"110",$:{Units:"pixels"}}]}],MediumImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41bz4b5IbLL._SL160_.jpg"],Height:[{_:"160",$:{Units:"pixels"}}],Width:[{_:"160",$:{Units:"pixels"}}]}],LargeImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41bz4b5IbLL.jpg"],Height:[{_:"500",$:{Units:"pixels"}}],Width:[{_:"500",$:{Units:"pixels"}}]}],HiResImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/71-w1EWOaWL.jpg"],Height:[{_:"2560",$:{Units:"pixels"}}],Width:[{_:"2560",$:{Units:"pixels"}}]}]}]}]}];
let urlsArray = [];
data[0].ImageSets[0].ImageSet.map((image) => {
urlsArray.push(image.LargeImage[0].URL[0]);
});
console.log(urlsArray);

How to concatenate 2 arrays by index order? [duplicate]

This question already has answers here:
Javascript equivalent of Python's zip function
(24 answers)
Closed 3 years ago.
Im trying to figure out how to use highcharts with the dates. Im doing an API call and have in one variable clicks and in another variable the dates. I want to concatenate these 2 arrays but following the index.
For example
array1 = [timestamp1 , timestamp2, timestamp3]
array2 =[ clicks1, clicks2, clicks3 ]
I want to have then an array that is
data = 0: [timestamp1, click1],
1: [timestamp2, click2],
2: [timestamp3, click3]
I tried doing var data = array1.concat(array2);
but it concatenates in order
data = [timestamp1 , timestamp2, timestamp3 , clicks1, clicks2, clicks3 ]
my original code looks like this:
getChartData(){
axios.get("http://localhost:3003/desktop").then(api =>{
const data = api.data;
// console.log(data)
var date =[];
var clicks = []
var impressions =[]
for ( var i in data)
{
date.push(data[i].Date)
clicks.push(data[i].Clicks)
impressions.push(data[i].Impressions)
}
var cd = date.concat(clicks);
console.log(cd)
this.setState({
clicks:clicks,
date:date,
impressions:impressions,
cd: cd
})
});
}
This might be a very basic question, but I'm a beginner and could not find anything related.Any help would be appreciated.
Assuming that both arrays are the same length you could use something like this. You can do the iteration a variety of ways.
const arr1 = ['a', 'b', 'c'];
const arr2 = ['A', 'B', 'C'];
const arrPaired = arr1.map((ent, i) => [ent, arr2[i]]);
console.log(arrPaired);
You could parse all the keys of one of your array and then retrieve the value from both array using that key. Ex:
let output = []
Object.keys(array1).forEach((key) => {
output.push(array1[key], array2[key]);
});
Here i'm using the forEach array function but you could achieve the same goal using a normal foreach loop.
Please note that this code is untested, it is just to show you the basic idea.

Typescript foreach variable not available

I have a foreach loop where I create a new temp array, then run a nested foreach loop. I'm then trying to access the temp array inside the nested foreach loop, but it's coming back with a "variable not available" error.
let final = {
array: []
};
myArray.forEach(item =>
{
let newObject = { items: [] };
item.subArray.forEach(subItem =>
{
var subObject = { prop: subItem.prop };
// Error here: "newObject is not available"
newObject.items.push(subObject);
});
// Error here: "final is not available"
final.array.push(newObject);
});
I know I can provide this to the array by providing it as an argument (eg: item.subArray.forEach(subItem => {},this);)
but this doesn't help me because tempArray doesn't exist at the class level.
I have the same problem when I try to assign my temp array to the "final" array declared outside the foreach.
Is there a way I can access the parent scope from within the foreach?
I should point out this code exists within a function defined on a class. I'm basically trying to aggregate properties with a certain value from within the subarray
Screenshot showing the issue: http://i.imgur.com/HWCz0Ed.png
(The code visible in the image is within the first forEach loop)
Update: I figured this out, it was an issue between using let and var. See my answer below for details.
The code you pasted into the question must not be your real code. if it was you would have had no problem accessing finalArray.
The results of both your snippets are very different.
the first will give you an array of all the properties of the sub item of the last item.
the seconds will give you an array of arrays where each array contains the properties of the sub item
If I understand correctly what you want is to get a single array containing all the properties of all the sub items. so you want to map each item to an array of sub-item properties and then flatten the result into a single array.
How about this?
var items = [
{subitems:[
{prop:1},
{prop:2},
]},
{subitems:[
{prop:3},
{prop:4},
]},
]
var result = items.map(function(item){
return item.subitems.map(function(subitem){
return subitem.prop;
})
}).reduce(function(prev,curr){
return prev.concat(curr);
},[]);
console.log(result);
Update: I finally figured this out. In my actual code I was creating newObject using TypeScript's let keyword. I changed it to var instead and it started working.
Chalk that up to me not understanding the difference between let (block scope) and var (global scope) - d'oh!
The solution listed below also worked for me, but simply changing let to var has meant that my original code works perfectly.
I solved this by using map() instead of forEach():
var final = {
array: []
};
var finalArray = myArray.map(function (item)
{
let newObject = { items: [] };
var tempArray = item.subArray.map(function (subItem)
{
var subObject = { prop: subItem.prop };
return subObject;
});
newObject.items = tempArray;
return newObject;
});
final.array = finalArray;

Categories

Resources