Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to access nested json object inside array in react js

I want to access nested JSON object values by iterating. This is the data I get from my query:

{"_id":"654d4224fb04863b8eb89200","firms":[{"_id":["65423d5c240388c1594e7b7b"],"name":["Camaro Coiled Tubing"]}]}
{"_id":"654d4224fb04863b8eb8920d","firms":[{"_id":["65423d5c240388c1594e7b82"],"name":["DANCO Coiled Tubing"]}]}
{"_id":"654d4224fb04863b8eb8921b","firms":[{"_id":["65423d5c240388c1594e7b7d"],"name":["San Joaquin Bit"]}]}

I would like to create a second array with only the firm and name and have tried the following:

      vendorList.forEach(function (d) {
        vendorArray.push({
          id: d.firms._id,
          name: d.firms.name,
        });
      });

My output looks like this:

Vendor List:  [{}, {}, {}, {}]

An empty array.

Tags:

3

Answers


  1. 0

    First of all your vendorList array is wrong.

    let vendorList = [{"_id":"654d4224fb04863b8eb89200","firms":[{"_id":["65423d5c240388c1594e7b7b"],"name":["Camaro Coiled Tubing"]}]},
{"_id":"654d4224fb04863b8eb8920d","firms":[{"_id":["65423d5c240388c1594e7b82"],"name":["DANCO Coiled Tubing"]}]},
{"_id":"654d4224fb04863b8eb8921b","firms":[{"_id":["65423d5c240388c1594e7b7d"],"name":["San Joaquin Bit"]}]}]

    then did the traversal same as your code,but id & name are at first index of firms so made the changes as per it.

    let vendorArray = [];
vendorList.forEach((vendor) => {
    vendorArray.push({
        id: vendor.firms[0]._id,
        name: vendor.firms[0].name,
    })
})

    Final output:

    [
  {
    id: [ '65423d5c240388c1594e7b7b' ],
    name: [ 'Camaro Coiled Tubing' ]
  },
  {
    id: [ '65423d5c240388c1594e7b82' ],
    name: [ 'DANCO Coiled Tubing' ]
  },
  { id: [ '65423d5c240388c1594e7b7d' ], name: [ 'San Joaquin Bit' ] }
]
    Login or Signup to reply.
  2. 0

    Assuming your data is actually an array of objects you can use flatMap and map to return the values embedded in the nested objects/arrays.

    const data = [{"_id":"654d4224fb04863b8eb89200","firms":[{"_id":["65423d5c240388c1594e7b7b"],"name":["Camaro Coiled Tubing"]}]},
{"_id":"654d4224fb04863b8eb8920d","firms":[{"_id":["65423d5c240388c1594e7b82"],"name":["DANCO Coiled Tubing"]}]},
{"_id":"654d4224fb04863b8eb8921b","firms":[{"_id":["65423d5c240388c1594e7b7d"],"name":["San Joaquin Bit"]}]}];

// For each object in the array map over the firm data
// and, for each firm, extract the data from each firm array
// and return only those two values in an object
const out = data.flatMap(obj => {
  return obj.firms.map(firm => {
    const { _id: [_id], name: [name] } = firm;
    return { _id, name };
  });
});

console.log(out);
    Login or Signup to reply.
  3. 0

    To access nested JSON objects within an array in ReactJS (or
    JavaScript in general), and based on your specific case, you need to
    adjust how you’re iterating over the data. Specifically, you’ll need
    to take into account that firms is an array of objects within each
    item of your vendorList. Also, it looks like both the _id and name
    properties within each firm are arrays themselves, which is somewhat
    unusual. Assuming you want to access the first _id and name for each
    firm,

    let vendorArray = [];

vendorList.forEach(function (d) {
  // Iterate over each firm within the firms array of the current item
  d.firms.forEach(function (firm) {
    // Assuming _id and name are arrays and you want the first element of each,
    // use firm._id[0] and firm.name[0].
    vendorArray.push({
      id: firm._id[0], // Access the first element of the _id array
      name: firm.name[0], // Access the first element of the name array
    });
  });
});

console.log(vendorArray);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search