Cant access data inside nested array of objects

Question

I have an array of objects that I want to iterate over and create a new array of objects.

First I map over the data, then I loop through each object to extract the values. I want to store the Location name and value from each object.

My code is returning null results. I can't change the way data is declared. Can someone help me understand why I keep getting null results?

[
 {
 "euValue": null,
 "asValue": null
 }
]

const data = [{
 Locations: [{
 Location: {
 Name: "Europe"
 },
 Value: "Ireland"
 },
 {
 Location: {
 Name: "Asia"
 },
 Value: "China"
 }
 ]
}];
const formatData = () => {
 let formattedData = [];
 let euValue, asValue;
 formattedData = data.map(location => {
 for (const l in location) {
 if (location.hasOwnProperty(l)) {
 const _this = location[l];
 euValue = _this.Location === "Europe" ? _this.Value : null;
 asValue = _this.Location === "Asia" ? _this.Value : null;
 }
 }
 return {
 euValue,
 asValue
 };
 });
 return formattedData;
};
const newData = formatData();
console.log(newData);

Edit Expected result is

[
 {
 "euValue": "Ireland",
 "asValue": "China"
 }
]

• Coluccini: Can you tell us what result you expect to get, so it help us understand the issue a little bit better 🙏 You could have multiple Locations children inside data?
• kvsm: You need to debug your code, specifically the map function, and ensure that the values you are working with are what you think they are. I think it is beyond the scope of an answer to fix this for you.

Answer 1

Assuming that inside data you could have multiple objects with a Location array that have only 2 objects (one for Europe and another one for Asia) you should change your function to something like this

 const data = [
 {
 Locations: [
 {
 Location: { Name: "Europe" },
 Value: "Ireland"
 },
 {
 Location: { Name: "Asia" },
 Value: "China"
 }
 ]
 }
 ];
 const formatData = () => {
 // iterate all data objects
 	return data.map((topLocation) => {
 const res = {};
 // loop over Location children objects
 topLocation.Locations.forEach((location) => {
 const { Name } = location.Location;
 // decide where to save Value base on the Location.name
 if (Name === "Europe") {
 res.euValue = location.Value;
 } else if (Name === "Asia") {
 res.asValue = location.Value;
 }
 });
 return res;
 });
 };
 const newData = formatData();
 console.log(newData);

Answer 2

you missing a second loop also you overwriting the usValue and euValue and you better use forEach instead of map in this case.

const data = [{
 Locations: [{
 Location: {
 Name: "Europe"
 },
 Value: "Ireland"
 },
 {
 Location: {
 Name: "Asia"
 },
 Value: "China"
 }
 ]
}];
const formatData = (data) => {
 let formattedData = [],
 values = {};
 data.forEach(location => {
 for (const l in location) {
 if (location.hasOwnProperty(l)) {
 const _this = location[l];
 _this.forEach(el => {
 if (el.Location.Name === "Europe") {
 values["euValue"] = el.Value || null
 }
 if (el.Location.Name === "Asia") {
 values["asValue"] = el.Value || null
 }
 })
 }
 }
 });
 formattedData.push(values)
 return formattedData;
};
console.log(formatData(data))

Answer 3

I don't know what do you want to get from your code but this code may help you.

const data = [{
 Locations: [{
 Location: {
 Name: "Europe"
 },
 Value: "Ireland"
 },
 {
 Location: {
 Name: "Asia"
 },
 Value: "China"
 }
 ]
}];
const formatData = () => {
 let formattedData = [];
 formattedData = data.map(location => {
 let euValue = [],
 asValue = [];
 for (const l in location.Locations) {
 if (location.Locations.hasOwnProperty(l)) {
 const _this = location.Locations[l];
 if (_this.Location.Name === "Europe")
 euValue.push(_this.Value);
 else if (_this.Location.Name === "Asia")
 asValue.push(_this.Value);
 }
 }
 return {
 euValue,
 asValue
 };
 });
 return formattedData;
};
const newData = formatData();
console.log(newData);

• Mark Schultheiss: for a snippet, there is a tidy button to format a bit better
• Jorge: Hi, @MarkSchultheiss. what code was copied from another?
• Jorge: it is the tab space auto-formatting in the snippet.
• Mark Schultheiss: I clicked the Tidy button and saved it, for reference
• Jorge: Let us continue this discussion in chat.

Answer 4

I'm sure many of the other answers are fine but the way I did it was to do the classic for loop to iterate over the data. I would have liked to have kept your ternary operators but I think you may need the if/else syntax.

var data = [{
 Locations: [{
 Location: {
 Name: "Europe"
 },
 Value: "Ireland"
 },
 {
 Location: {
 Name: "Asia"
 },
 Value: "China"
 }
 ]
}];
const formatData = () => {
 let formattedData = [];
 let euValue, asValue;
 formattedData = data.map(location => {
 for (const l in location) {
 if (location.hasOwnProperty(l)) {
 const _this = location[l];
 for (let i = 0; i < _this.length; i++) {
 if (_this[i].Location.Name === "Europe") {
 euValue = _this[i].Value;
 } else if (_this[i].Location.Name === "Asia") {
 asValue = _this[i].Value;
 } else {
 euValue, asValue = null;
 }
 }
 }
 }
 return {
 euValue,
 asValue
 };
 });
 return formattedData;
};
const newData = formatData();
console.log(newData);

• Mark Schultheiss: perhaps change the "one" and "two" to match the OP desired "euValue" and "asValue"

Answer 5

Using Array.prototype.flatMap() might help you get the array you desire in a cleaner way:

const data = [{
 Locations: [{
 Location: {
 Name: "Europe"
 },
 Value: "Ireland"
 },
 {
 Location: {
 Name: "Asia"
 },
 Value: "China"
 }
 ]
}];
const formatData = () => {
 const formattedData = data.flatMap(item => {
 const object = {}
 item.Locations.map(location => {
 const continent = location.Location.Name
 let country = {}
 if (continent === 'Europe') country = {
 euValue: location.Value
 }
 if (continent === 'Asia') country = {
 asValue: location.Value
 }
 Object.assign(object, country)
 });
 return object
 });
 return formattedData;
}
const newData = formatData();
console.log(newData);

• Mark Schultheiss: for a snippet, there is a tidy button to format a bit better
• slye: Thank you @MarkSchultheiss :)