l oop через несколько объектов внутри первого массива из JSON данных, отображающих два массива с объектами в React с использованием FUNCTION COMPONENT

Question

каков самый лучший и простой способ доступа к этим данным в ReactJS, используя FUNCTION COMPONENT ?

Проблема в том, что у меня есть два массива с объектами и я хочу ДО L OOP ЧЕРЕЗ ПЕРВЫЙ Массив и отображать КАЖДЫЙ ЭЛЕМЕНТ ИЗ ОБЪЕКТА ВНУТРИ.

console.log (данные)

(20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
(20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

Вот как данные представлены в каждом массиве

0:
  first_name: "Jane"
  id: 6
  last_name: "Doe"
  city: "budapest"
1:
  first_name: "Michael"
  id: 10
  last_name: "Holland"
  city: "France"

etc...

(Пожалуйста, посмотрите на картинку ниже, чтобы понять, что я имею в виду под «0:» или «1:» . Таким образом, данные json отображаются внутри массива по записям, я думаю)

Мое текущее решение ниже работает только когда у вас есть один массив с объектами внутри, но в этом случае, как вы можете видеть, у меня их два.

const items = [
    {first_name: "Jane",id: "6",last_name: "Doe",city: "Budapest"},
    {first_name: "David",id: "10",last_name: "Smith",city: "Paris"},
  ]

  const newData = items.map((item) => {
    return (
      <div className="something" key={item.id}>{item.first_name}</div>
    )
  })

Обратите внимание, что я использую ReactJS 16,9

Заранее спасибо.

Answer 1

Если я вас правильно понял, вы можете объединить оба массива и затем использовать его.

Примерно так:

// First Array
const stations = [
    {first_name: "Jane",id: "6",last_name: "Doe",city: "Budapest"},
    {first_name: "David",id: "10",last_name: "Smith",city: "Paris"},
];

// Second Array
const stations2 = [
    {first_name: "Jane",id: "6",last_name: "Doe",city: "Budapest"},
    {first_name: "David",id: "10",last_name: "Smith",city: "Paris"},
];

const allStations = [...stations , ...stations2 ]; // <----- HERE

const newData = allStations.map((item) => {
    return (
        <div className="something" key={item.id}>{item.first_name}</div>
    )
})