尝试“映射”嵌套的 JSON 元素对象（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.

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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>