React.js 映射 json object 与多个嵌套 arrays； 迭代数据并传递到轮播

Question

I'm having a hard time reaching wanted data from my json.

Since I can't post original one, I'll make an example

{ example1: "some string",
example2: [{
     data:{
      category:{
        categoryName: "some name",
        subCategory:[{
            id: 123
            name: "another name",
            info: {id: "1",title: "title"}
            thefinal:[{
                 id: "12323",
                 datetime: {date: "24\/01\/21",time: "22:20"}
            }]
        }]
      }
  }
}]
  }

Now, I can fetch the data up to some point and print it but I think I'm doing it the wrong way. When I fetch the data, I save the result as result.example2.

  const[example, setExample] = useState([])

  useEffect(() => {
   const fetchExamples = async () => {
    
    const result = await axios(url)

    setExample(result.data.example2)
 
   }
   fetchExamples()
  }, )

Then I pass it into another component where I made a variable for some of these parameters; such as let statusId = categoryName.subCategory[0].thefinal[0].id // When I console statusId it shows well, but I need a way of making this less static. I've also made a map

   <div>  {subCategory.slice(0, max).map((item, index) => <div key={index}>{subCategory.item}</div>)}</div>

It successfully shows a list of ids, even though I won't need them in such format. So I can access the data, just not the right way.

Do I need to do multiple maps, one after the other?

PT.2 I eventually need to pass this data from different arrays into a carousel. I also managed to print all the values for specific parameters but I would have to show one at a time. For example I'll have 5 slides; 5 carousel items that show only one id at a given slide (slide 1: id 1; slide 2: id:2)

I'm sorry if it doesn't make much sense, I could try to give more info or maybe even sanbox of some sort. I've spent so much time trying to figure this out that I can't think clearly anymore and I have nobody to ask. It may seem as an easy task but I'm just a beginner and it's overwhelming.

Answer 1

I'm having a hard time reaching wanted data from my json.

Since I can't post original one, I'll make an example

{ example1: "some string",
example2: [{
     data:{
      category:{
        categoryName: "some name",
        subCategory:[{
            id: 123
            name: "another name",
            info: {id: "1",title: "title"}
            thefinal:[{
                 id: "12323",
                 datetime: {date: "24\/01\/21",time: "22:20"}
            }]
        }]
      }
  }
}]
  }

Now, I can fetch the data up to some point and print it but I think I'm doing it the wrong way. When I fetch the data, I save the result as result.example2.

  const[example, setExample] = useState([])

  useEffect(() => {
   const fetchExamples = async () => {
    
    const result = await axios(url)

    setExample(result.data.example2)
 
   }
   fetchExamples()
  }, )

Then I pass it into another component where I made a variable for some of these parameters; such as let statusId = categoryName.subCategory[0].thefinal[0].id // When I console statusId it shows well, but I need a way of making this less static. I've also made a map

   <div>  {subCategory.slice(0, max).map((item, index) => <div key={index}>{subCategory.item}</div>)}</div>

It successfully shows a list of ids, even though I won't need them in such format. So I can access the data, just not the right way.

Do I need to do multiple maps, one after the other?

PT.2 I eventually need to pass this data from different arrays into a carousel. I also managed to print all the values for specific parameters but I would have to show one at a time. For example I'll have 5 slides; 5 carousel items that show only one id at a given slide (slide 1: id 1; slide 2: id:2)

I'm sorry if it doesn't make much sense, I could try to give more info or maybe even sanbox of some sort. I've spent so much time trying to figure this out that I can't think clearly anymore and I have nobody to ask. It may seem as an easy task but I'm just a beginner and it's overwhelming.