无法访问嵌套对象数组中的数据

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

Answer 1

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 2

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

Answer 4

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

Answer 5

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