尝试 'map' 嵌套 JSON 元素对象 (javascript)

Question

我正在尝试 'map' 嵌套 JSON 个具有对象的元素，以便构建 HTML。我不确定我做错了什么语法如下：

    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>

提前感谢您的时间和考虑。

Answer 1

   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 2

将数组视为一个对象。它以类似的方式访问，所以如果它是一个对象，它将是这样的：

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

因此，要直接访问它的第一个元素，您需要：

array1[0].things

要获得您想要的结果，您需要执行以下操作：

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

如果您的数组可以包含多个元素，您可以使用以下内容：

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 3

正如 Nick Parsons 所说，您必须遍历 array1 数组才能获得 things 属性.

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

此外，请注意，如果您的 array1 变量为空，或者首选索引中没有 things 属性，您的代码代码将出错。请务必检查它们是否为空。您可以使用 lodash isEmpty 函数来做到这一点。

Answer 4

正如 Nick Parsons 在评论中所说，您必须遍历 array1 以获得所需的输出。

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>

尝试 'map' 嵌套 JSON 元素对象 (javascript)

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

javascript

template-literals