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

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? — Coluccini
– Coluccini, Commented Sep 24, 2019 at 18:07
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. — kvsm
– kvsm, Commented Sep 24, 2019 at 18:24

Coluccini · Accepted Answer · 2019-09-24 18:50:48Z

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

Aziz.G · Accepted Answer · 2019-09-24 19:48:20Z

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

Mark Schultheiss · Accepted Answer · 2019-09-25 15:40:59Z

0

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

edited Sep 25, 2019 at 15:40

Mark Schultheiss

34.3k13 gold badges75 silver badges116 bronze badges

answered Sep 24, 2019 at 18:30

Jorge

1,3361 gold badge11 silver badges23 bronze badges

5 Comments

Mark Schultheiss Over a year ago

for a snippet, there is a tidy button to format a bit better

Jorge Over a year ago

Hi, @MarkSchultheiss. what code was copied from another?

Jorge Over a year ago

it is the tab space auto-formatting in the snippet.

Mark Schultheiss Over a year ago

I clicked the Tidy button and saved it, for reference

Jorge Over a year ago

Let us continue this discussion in chat.

Tiberiuscan · Accepted Answer · 2019-09-25 16:48:04Z

0

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

edited Sep 25, 2019 at 16:48

answered Sep 24, 2019 at 19:16

Tiberiuscan

4234 silver badges8 bronze badges

1 Comment

Mark Schultheiss Over a year ago

perhaps change the "one" and "two" to match the OP desired "euValue" and "asValue"

slye · Accepted Answer · 2019-09-25 22:20:12Z

0

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

edited Sep 25, 2019 at 22:20

answered Sep 24, 2019 at 18:44

slye

515 bronze badges

2 Comments

Mark Schultheiss Over a year ago

for a snippet, there is a tidy button to format a bit better

slye Over a year ago

Thank you @MarkSchultheiss :)

Collectives™ on Stack Overflow

Cant access data inside nested array of objects

5 Answers 5

Comments

Comments

5 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

5 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related