从 JSON 数据中循环遍历第一个数组中的多个对象，显示两个 arrays 与使用 FUNCTION 组件的 React 中的对象

Question

what is the best and simple way to access this data in ReactJS using FUNCTION COMPONENT ?

The problem is that I have two arrays with objects and I want TO LOOP THROUGH THE FIRST ARRAY AND DISPLAY EACH ITEMS FROM THE OBJECT INSIDE.

console.log(data)

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

This is how the data are represented in each array

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

etc...

(Please take a look at the picture below to understand what I mean by "0:" or "1:". That is the way the json data is displayed inside the array by records i guess)

My current solution below only work when you have one array with objects inside but in this case as you can see I have two.

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

Please note that I am using ReactJS 16.9

Thank you in advance.

Answer 1

If I am getting you correctly, then you can merge both Array and then use it.

Something like this:

// 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>
    )
})