Trying to 'map' nested JSON element object (javascript)

Question

I am trying to 'map' nested JSON elements that have objects in order to build HTML. I am not sure what I am doing wrong with the syntax as follows:

    array1 = [
      {
        "name":"test",
        "things": [
          { "name":"thing1" },
          { "name": "thing2"}
        ]
      }
    ];

    const createThingy = (item) => `
        <p>${item.name}</p>
    `

    // pass a function to map
    const map1 = array1.things.map(createThingy).join('');
    console.log(array1);

    // expected output: <p>thing1</p><p>thing2</p>

Thank you in advance for your time and consideration.

array1 is an array so it doesn't have a things property, you'll need to loop over your array to access the inner objects — Nick Parsons
– Nick Parsons, Commented Jan 12, 2020 at 6:16

Angel Politis · Accepted Answer · 2020-01-12 06:55:24Z

Think of the array as an object. It's accessed in a similar way, so if it were an object it would be like this:

let array1 = {
  0: {
    "name":"test",
    "things": [
      { "name": "thing1" },
      { "name": "thing2" }
    ]
  }
};

Therefore, to access its first element directly you need:

array1[0].things

To get your desired outcome you need to the following:

let array1 = [
  {
    "name": "test",
    "things": [
      { "name": "thing1" },
      { "name": "thing2" }
    ]
  }
];

const createThingy = (item) => `
  <p>${item.name}</p>
`;

// pass a function to map
const map1 = array1[0].things.map(createThingy).join('');
console.log(map1);

In case your array can have multiple elements, you can use the following:

let array1 = [
  {
    "name": "test",
    "things": [
      { "name": "thing1" },
      { "name": "thing2" }
    ]
  }
];

const createThingy = (item) => `
  <p>${item.name}</p>
`;

// pass a function to map
const map1 = array1.reduce((acc, elem) => acc + elem.things.map(createThingy).join(''), "");
console.log(map1);

ebyte · Accepted Answer · 2020-01-12 06:39:15Z

0

   array1 = [
      {
        "name":"test",
        "things": [
          { "name":"thing1" },
          { "name": "thing2"}
        ]
      }
    ];

    const createThingy = (item) => `
        <p>${item.name}</p>
    `

    // pass a function to map
    const map1 = array1[0].things.map(createThingy).join('');
    console.log(array1);
    console.log(map1);

answered Jan 12, 2020 at 6:39

ebyte

1,5173 gold badges22 silver badges36 bronze badges

Comments

Tariqul Islam · Accepted Answer · 2020-01-12 06:45:56Z

0

As Nick Parsons said, you have to loop over the array1 array to get things property.

const array1 = [
  {
    "name":"test",
    "things": [
      { "name":"thing1" },
      { "name": "thing2"}
    ]
  }
];

const createThingy = (item) => `
    <p>${item.name}</p>
`

// pass a function to map
const map1 = array1[0].things.map(createThingy).join('');

console.log(array1);
console.log(map1);

Also, be advised that if your array1 variable is empty or in case there is no things attribute in preferred index, your code code will give error. Be sure to check if they are empty. You can do this by using lodash isEmpty function.

answered Jan 12, 2020 at 6:45

Tariqul Islam

12 bronze badges

Comments

Banid Azin · Accepted Answer · 2020-01-12 07:13:30Z

0

You have to loop over the array1 to get the desired output as Nick Parsons said in the comments.

array1 = [
      {
        "name":"test",
        "things": [
          { "name":"thing1" },
          { "name": "thing2"}
        ]
      }
    ];

    const createThingy = (item) => `
        <p>${item.name}</p>
    `

array1.map(item => {
item.map(key => createThingy(key).join(''));
});

    // expected output: <p>thing1</p><p>thing2</p>

answered Jan 12, 2020 at 7:13

Banid Azin

1902 silver badges18 bronze badges

Collectives™ on Stack Overflow

Trying to 'map' nested JSON element object (javascript)

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related