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

我在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>
        );
    }
}

如何按名称和/或多个标记筛选此图像。 每个数组的第二个元素是图像的名称，最后一个元素是标记数组。

只需在执行.map之前使用.filter即可：

您可以使用来对照搜索检查每个图像，或使用来检查给定图像的任何标记是否与搜索中的标记匹配：

常量图像=[ [图像0，[仆人，鞋子]]， [图1，[螺丝钉，餐厅]]， [图2，[cub，relation]]， [图3，[条件，黄油]]， [图4，[动物园，轮子]]， [图5[方式，国际象棋]]， [图6，[国家，气味]]， ]; const searchName=Image 3； const searchTags=[cub，country]； console.logimages.filter[名称、标记]=>{ //使用。查找： //返回name==searchName | | tags.findtag=>searchTags.includestag； //有些人： 返回name==searchName | | tags.sometag=>searchTags.includestag；

---

}.mapimage=>图像[0]。加入“，”；使用过滤器，或者，如果您正在使用redux，重新选择是一个不错的选择。如何过滤？基于哪些属性？通过图像数组最后一个元素中的任何标记，我的意思是它们可以是每个标记数问题是用户可以设置任意数量的过滤器，我不知道“先验”用户将选择多少个过滤器和哪些过滤器，也许我需要在过滤器中进行某种回调，我不知道我是否解释了这个问题correctly@Kousha我已经测试了您的解决方案，它抛出错误Uncaught SyntaxError:意外标记“因此您希望按特定标记进行筛选，即如果标记数组有元素，则将其包含？@MariosNikolaou更新了它-出现语法错误，抱歉！用户应该能够通过n个标签而不是名称进行筛选

// In your example, this variable comes from user input, so it's dynamic and should be passed as `this.props.tags`
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]}
      />
    );
  });