Попытка «отобразить» вложенный JSON элемент объекта (javascript) - PullRequest
Новая
       16

Попытка «отобразить» вложенный JSON элемент объекта (javascript)

0 голосов
/ 12 января 2020

Я пытаюсь 'отобразить' вложенные 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>

Заранее спасибо за ваше время и внимание.

Ответы [ 4 ]

1 голос
/ 12 января 2020

Думайте о массиве как об объекте. Доступ к нему осуществляется аналогичным образом, поэтому, если бы это был объект, он бы выглядел следующим образом: 

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);
0 голосов
/ 12 января 2020

Вам нужно l oop по массиву1, чтобы получить желаемый результат, как сказал Ник Парсонс в комментариях. 

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>
0 голосов
/ 12 января 2020

Как сказал Ник Парсонс, вам нужно l oop над массивом 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, код вашего кода выдаст ошибку. Не забудьте проверить, если они пусты. Вы можете сделать это с помощью функции loda sh isEmpty.

0 голосов
/ 12 января 2020 

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