使用Javascript

时间:2018-02-14 14:35:45

标签: javascript jquery arrays multidimensional-array filtering

我喜欢从另一个数组中过滤出静态数组值,这些数组的值会在点击时动态更改,并基于该数组创建新的临时数组。我不知道如何在不做一堆我不想要的if语句或switch语句的情况下这样做。我相信有更有效的方法。

例如,我得到了这个静态数组:

0:[
    ['productFilters',
        ['productCat', 'Bottle'],
        ['productType', 'Double wall airless pump'],
        ['productMaterial', 'PP'],
        ['productSizesMl', '10, 15, 60'],
        ['productSizesOz', '0.12, 0.18, 0.32']
    ]
],
1:[
    ['productFilters',
        ['productCat', 'Tube'],
        ['productType', 'Round Tube'],
        ['productMaterial', 'LDPE'],
        ['productSizesMl', '105, 260'],
        ['productSizesOz', '0.55, 12.17']
    ]
],
2:[
    ['productFilters',
        ['productCat', 'Tube'],
        ['productType', 'Airless'],
        ['productMaterial', 'LDPE, PP'],
        ['productSizesMl', '60, 70'],
        ['productSizesOz', '0.32, 0.38']
    ]
]

然后我们得到了这个动态数组,值可以在点击时改变,甚至可以为空。

[               
    ['productCat', 'Tube'], 
    ['productType', 'Airless'], 
    ['productMaterial', 'PP'], 
    ['productSizesMl', '60'],
    ['productSizesOz', '0.32']
];

基于这些示例,我想比较两个数组并将其过滤掉。在此,我只会在过滤后返回第二个数组,因为即使静态数组具有多个值,例如" productSizesMl",动态数组中的所有值基本匹配。是否会发现" 60"。然后从中创建一个新的临时数组。

我创建了2个数组,一个用于过滤掉ProductCat,所以如果你点击Tube只有两个项目(1,2)将从我的静态数组返回到我的新临时数组中。哪个工作正常。

我的第一个循环:

for ( p=0; p < newResults.length; p++ ) {
    if (newResults[p][0][1] == thisCat) {
      tempProArray[p] = newResults[p];
  }
}

然后我有另一个数组,以进一步滤除我的新临时数组,如果点击则适用于第二个过滤器。

第二个临时数组:

for ( f=0; f < tempProArray.length; f++ ) {
  newResult = tempProArray[f][1];
  for ( k=0; k < newResult[k].length; k++ ) {
      if (filterArray[k][1] !== 'none') {
        if (newResult[k][1].indexOf(filterArray[k][1]) > -1) {
          tempFilterArray[f] = tempProArray[f];
        }
      }
  } 
}

filterArray数组是我的动态数组,可以更改值。基本上,当我点击例如过滤器Type-&gt; Airless,它从我的第一个临时数组中返回最后一个值,并从中创建另一个临时数组,其中只有一个项目。下面是我的第二个临时数组

0:[
    ['productFilters',
        ['productCat', 'Tube'],
        ['productType', 'Airless'],
        ['productMaterial', 'LDPE, PP'],
        ['productSizesMl', '60, 70'],
        ['productSizesOz', '0.32, 0.38']
    ]
]

我遇到的问题是当我点击不同的过滤器例如材料并选择LDPE时。它不是仅过滤掉我在第二个临时数组中的那个项目,而是通过所有2个具有“产品数据”的项目过滤掉。 Tube的值然后它返回2个项目,因为它们都有&product; productMaterial&#39; LDPE的价值。

1 个答案:

答案 0 :(得分:0)

为了更快地访问并且没有太多嵌套迭代,我建议使用分割值构建一个具有分割值的对象,如果找到var data = [[['productFilters', ['productCat', 'Bottle'], ['productType', 'Double wall airless pump'], ['productMaterial', 'PP'], ['productSizesMl', '10, 15, 60'], ['productSizesOz', '0.12, 0.18, 0.32']]], [['productFilters', ['productCat', 'Tube'], ['productType', 'Round Tube'], ['productMaterial', 'LDPE'], ['productSizesMl', '105, 260'], ['productSizesOz', '0.55, 12.17']]], [['productFilters', ['productCat', 'Tube'], ['productType', 'Airless'], ['productMaterial', 'LDPE, PP'], ['productSizesMl', '60, 70'], ['productSizesOz', '0.32, 0.38']]]], filters = [['productCat', 'Tube'], ['productType', 'Airless'], ['productMaterial', 'PP'], ['productSizesMl', '60'], ['productSizesOz', '0.32']], result = data.filter(([p]) => { var product = Object.create(null); p.slice(1).forEach(([key, value]) => product[key] = value.split(', ')); return filters.every(([key, value]) => product[key].includes(value)); }); console.log(result);,因为我不依赖于顺序而且所有属性以完全相同的顺序给出产品或过滤器。

然后你可以通过检查产品的单个值的所有给定的过滤器值来过滤数组。

.as-console-wrapper { max-height: 100% !important; top: 0; }
<!--you bottom sheet linear layout -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <!--Layout contains button-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:background="@android:color/transparent"
            android:clickable="false"   
            >

            <!--Your button-->
            <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" 
                android:src="your drawable"
                android:background="@android:color/transparent"
                android:clickable="true"/>
        </LinearLayout>

        <!--put Your other views in below linear layout -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        </LinearLayout>
    </LinearLayout>

毋庸置疑,没有嵌套数组的良好数据结构可以使开发更容易。