如何通过多个标签过滤JSON中的数组

问题描述 投票:1回答:2

我正在React中渲染像这样的Json的图像列表

{
  "images": [
    ["c8483f65-f67f-48d9-a0f8-78da8f66115d", "Image 0", "https://cdn.shibe.online/shibes/2293625f8b5e74478e51434fbbe158b43f17b04f.jpg", ["servant", "shoes"]],
    ["4d22a5b7-079d-4f1c-9eba-570165c1f6b1", "Image 1", "https://cdn.shibe.online/shibes/4cc3559217012e477a674862f13d4ac533733cff.jpg", ["screw", "restaurant"]],
    ["acd3b528-3c56-41c9-a2bc-6094a55e21be", "Image 2", "https://cdn.shibe.online/shibes/6e817b4032beccbd7a3c93dc3b7e1f771e15aaec.jpg", ["cub", "relation"]],
    ["fca42de6-0eb1-4449-ab91-61b558c7b972", "Image 3", "https://cdn.shibe.online/shibes/d14e008e2aa18bcae592c5e16968050e7ca5ed43.jpg", ["condition", "butter"]],
    ["73fa77dd-6ec6-4f4d-a991-1bc6b59fb5fa", "Image 4", "https://cdn.shibe.online/shibes/2ca352bdf59566dbffef94724a192713f8970437.jpg", ["zoo", "wheel"]],
    ["34982d91-d537-4bc0-a481-028879a22c27", "Image 5", "https://cdn.shibe.online/shibes/6e7e3e6a60dcd4b27ac6940a8f44893010f171e4.jpg", ["way", "chess"]],
    ["4bdc55e4-937a-4208-aff3-981776a2404e", "Image 6", "https://cdn.shibe.online/shibes/20f3c14be166a24376e98b81f9464e153e6ece55.jpg", ["country", "smell"]],
{

[我从JSON获取此数据并将其作为道具传递给名为ImageList的React组件,该组件按如下所示进行映射和渲染

class ImageList extends React.Component{
    render(){
    console.log(this.props.images)
        var mappedImages = this.props.images.map(
        (img,index) => {
            return (
            <Img className = 'img' key = {img[0]} alt = {img[1]} src = {img[2]} tags = {img[3]}/>
            );
          } 
        );

        return(
            <div className = "imageList">
                {mappedImages}

           </div>
        );
    }
}

我如何通过名称和/或多个标签过滤此图像。每个数组的第二个元素是图像的名称,最后一个是标签的数组。

javascript reactjs
2个回答
1
投票
在使用.filter之前,请先使用.map

const tags = ['servant', 'zoo', 'chess', 'smell']; const images = this.props.images .filter(img => { // Add all your filters here // only the elements that return `true` here will be passed, all else will be filtered out. return img[1] === 'someImageName' && tags.some(img[2].includes); }) .map(img => { return ( <Img className='img' key={img[0]} alt={img[1]} src={img[2]} tags={img[3]} /> ); });


0
投票
您可以使用Array.prototype.filter()根据您的搜索检查每个单独的图像,并使用Array.prototype.filter()检查给定图像的任何标签是否与搜索中的标签匹配:

[如果您需要考虑不区分大小写,忽略空格和换行符的情况,或者仅在搜索中考虑更多字段,则可以在这些图像中添加“搜索”属性,您可能只会计算这些属性,服务,然后在Array.prototype.find()中使用单个const images = [
  ["Image 0", ["servant", "shoes"]],
  ["Image 1", ["screw", "restaurant"]],
  ["Image 2", ["cub", "relation"]],
  ["Image 3", ["condition", "butter"]],
  ["Image 4", ["zoo", "wheel"]],
  ["Image 5", ["way", "chess"]],
  ["Image 6", ["country", "smell"]],
];

const searchName = "Image 3";
const searchTags = ["cub", "country"];


// Using .filter and .find:

console.log(images.filter(([name, tags]) => {
  return name === searchName || tags.find(tag => searchTags.includes(tag));
}).map(image => image[0]).join(', '));

在这个简单的示例中,RegExp解决方案速度较慢,看起来更复杂,但是如果搜索逻辑不断增长,实际上可能会更快,更容易理解/理解。

此外,您的过滤逻辑不应位于Array.prototype.filter()内部,因为这可能会在应用程序中引入一些性能问题。您应该将其移动到整个组件上或仅在过滤逻辑周围的服务/选择器或Array.prototype.filter()

© www.soinside.com 2019 - 2024. All rights reserved.