CODEWITHSUNDEEP
javascripttemplate-literals
spookybot
spookybot

Reputation: 49

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

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.

Upvotes: 1

Views: 4757

Answers (4)

Banid Azin
Banid Azin

Reputation: 190

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>

Upvotes: 0

Angel Politis
Angel Politis

Reputation: 11313

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

Upvotes: 1

Tariqul Islam
Tariqul Islam

Reputation: 1

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.

Upvotes: 0

ebyte
ebyte

Reputation: 1517

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

Upvotes: 0

Related Questions