时间戳

首页 > 解决方案 > 从 JSON 响应创建轮播

arrays - 从 JSON 响应创建轮播

问题描述

我从服务器收到 JSON 响应，如下所示：

{
    "value_1": "a",
    "value_2": "b",
    "pagination": {
        "titles": [
            "Title 1",
            "Title 2",
            "Title 3",
            "Title 4",
            "Title 5"
        ]
    },
    "slides": [
        {
            "pagination_id": 0,
            "content": {
                "heading": "Welcome!",
                "description": "Stuff goes here",
                "image": {
                    "url": "<image_url>",
                    "alt": "alternative text"
                },
                "next": {
                    "label": "Next"
                }
            }
        },
        {
            "pagination_id": 1,
            "content": {
                "heading": "About",
                "description": "Stuff goes here",
                "image": {
                    "url": "<image_url>",
                    "alt": "alternative text"
                },
                "next": {
                    "label": "Next"
                }
            }
        },
        {
            "pagination_id": 2,
            "content": {
                "heading": "Welcome!",
                "description": "Stuff goes here",
                "groups": [
                    {
                        "id": 1,
                        "label": "Group 1"
                    },
                    {
                        "id": 2,
                        "label": "Group 2"
                    },
                    {
                        "id": 3,
                        "label": "Group 3"
                    }
                ],
                "next": {
                    "label": "Next"
                }
            }
        },
        {
            "pagination_id": 3,
            "heading": "Welcome!",
            "description": "Stuff goes here",
            "image": {
                "url": "<image_url>",
                "alt": "alternative text"
            },
            "back": {
                "label": "Back"
            },
            "next": {
                "label": "Next"
            }
        },
        {
            "pagination_id": 4,
            "heading": "Welcome!",
            "description": "Stuff goes here",
            "image": {
                "url": "<image_url>",
                "alt": "alternative text"
            },
            "back": {
                "label": "Back"
            },
            "next": {
                "label": ""
            }
        }
    ],
    "footer": {
        "legal": {
            "label": "Legal",
            "url": "<url>"
        },
        "privacy": {
            "label": "Privacy",
            "url": "<url>"
        },
        "cookies": {
            "label": "Cookies",
            "url": "<url>"
        }
    }
}

正如您可能知道的那样，这些数据被用于创建一个轮播，每张幻灯片上都显示幻灯片内容。我遇到的问题是幻灯片标题来自paginationJSON 的一部分，但实际幻灯片内容（包括下一步和后退按钮）来自该slides部分。

目前我有一些问题：

  1. 我需要为每张幻灯片获取正确的标题。
  2. 我需要根据每张幻灯片中存在的next和back属性来渲染按钮。
  3. 当单击按钮前进或后退时，我需要跟踪应该显示的幻灯片。

我已经知道我需要为第 1 部分做的是使用pagination_id幻灯片的 来从pagination.titles数组中获取正确的标题，但我不完全确定最好的方法来解决这个问题。

对于第二部分，我认为应该也可以使用pagination_id来跟踪当前幻灯片（我认为），但我不确定如何处理。我应该提到每张幻灯片的按钮将根据每张幻灯片的next和back属性进行渲染。

这个应用程序是用构建的React，我目前只使用本地状态，因为我认为这样的东西Redux真的不值得包含这么少量的数据。

对于这个难题的任何帮助将不胜感激，

谢谢你的时间

标签： arraysjsonreactjscarousel

解决方案

在您的情况下，尽管数据来自不同的数组，但您可以兑现的是两个数组中的项目数相同。因此，您可以只使用循环这些项目的数组的当前索引。所以它会是这样的：

更新代码

return(
 data.slides.map((slide, index)=>{
  return <div key={index}>
   <h1> {data.pagination.titles[index]} </h1> // for title
   <img src={slide.content?.image?.url || slide.image.url} alt={slide.content?.image?.alt || slide.image.alt} />
   //for buttons
   {(slide.content?.previous || slide.previous) && <button onClick={()=> setCurrentSlideIndex((index - 1) % data.slides.length)}> {slide.content?.previous?.label || slide.previous.label} </button>}
   {(slide.content?.next || slide.next) && <button onClick={()=> setCurrentSlideIndex((index + 1) % data.slides.length)}> {slide.content?.next?.label || slide.next.label} </button>}
</div>
})
)

希望你能明白。

更新

但是，如果发生了很多事情，那么您可能需要创建一个函数，该函数将布尔值作为参数告知特定项目是否具有内容对象，并根据该条件返回 ui。像这样的东西：

const renderSlide=(content, index)=>{
 if(content){
  return <div>
 // with slide.content.xyz
 <h1> data.pagination.titles[index] </h1>
<img src={data.slides[index].content.image.url}
 </div>
  }
else{
 return <div>
// with slide.xyz
<img src={data.slides[index].image.url}

</div>
}
}

并在你的函数中调用它：

return(
 data.slides.map((slide, index)=>{
 <>
  {renderSlide(slide.content, index)}
 <>
})

推荐阅读