如何根据用户将告诉键及其值的子数组的值来过滤此数组

Question

如果用户给出输入var key="value_0"和var input="hello"那么如何根据用户给定的值来过滤这个数组，这些值将在typescript中的子数组中，如根据上面给定的输入，它将仅过滤list.data具有key="value_0"以及此键的值，如果包含此input="hello" ，它将通过.includes方法检查

public list: any = [{
    "header": "API",
    "data": [{
        "value_0": "hello",
        "value_1": "abc",
        "value_2": "def",
        "value_3": "ghn",
        "value_4": "l"
      },
      {
        "value_0": "hello",
        "value_1": "abc",
        "value_2": "def",
        "value_3": "ghi",
        "value_4": "jkl"
      }
    ]
  },
  {
    "header": "CLOUD",
    "data": [{
        "value_0": "hello",
        "value_1": "abc",
        "value_2": "def",
        "value_3": "ghi",
        "value_4": "jkl"
      },
      {
        "value_0": "hello",
        "value_1": "abc",
        "value_2": "def",
        "value_3": "ghi",
        "value_4": "jkl"
      }
    ]
  },
  {
    "header": "OTHER HEADER",
    "data": [{
        "value_0": "hello",
        "value_1": "abc",
        "value_2": "def",
        "value_3": "ghi",
        "value_4": "jkl"
      },
      {
        "value_0": "yello",
        "value_1": "abc",
        "value_2": "def",
        "value_3": "ghi",
        "value_4": "jkl"
      }
    ]
  },
  {
    "header": "YET ANOTHER HEADER",
    "data": [{
        "value_0": "hello",
        "value_1": "abc",
        "value_2": "def",
        "value_3": "ghi",
        "value_4": "jkl"
      },
      {
        "value_0": "hello",
        "value_1": "abc",
        "value_2": "def",
        "value_3": "ghi",
        "value_4": "jkl"
      }
    ]
  }
];

如果用户给出key => value_o和input=> hel那么我们必须过滤上面的列表，就像我们必须进入数据并搜索这个key =>如果我们找到然后检查它的值是否包含该文本user被赋予input =>hell ，结果将是过滤后的数组，其中包含键和值包括用户输入因此，对于key=>'value_0'和input ='hell'结果将是相同的，因为在每个索引中的数据属性具有子数组，在子数组中，属性value_0存在，其值具有用户在输入中给出的文本。

[
  {
    "header": "API",
    "data": [{
        "value_0": "hello",
        "value_1": "abc",
        "value_2": "def",
        "value_3": "ghn",
        "value_4": "l"
      },
      {
        "value_0": "hello",
        "value_1": "abc",
        "value_2": "def",
        "value_3": "ghi",
        "value_4": "jkl"
      }
    ]
  },
  {
    "header": "CLOUD",
    "data": [{
        "value_0": "hello",
        "value_1": "abc",
        "value_2": "def",
        "value_3": "ghi",
        "value_4": "jkl"
      },
      {
        "value_0": "hello",
        "value_1": "abc",
        "value_2": "def",
        "value_3": "ghi",
        "value_4": "jkl"
      }
    ]
  },
  {
    "header": "OTHER HEADER",
    "data": [{
        "value_0": "hello",
        "value_1": "abc",
        "value_2": "def",
        "value_3": "ghi",
        "value_4": "jkl"
      },
      {
        "value_0": "yello",
        "value_1": "abc",
        "value_2": "def",
        "value_3": "ghi",
        "value_4": "jkl"
      }
    ]
  },
  {
    "header": "YET ANOTHER HEADER",
    "data": [{
        "value_0": "hello",
        "value_1": "abc",
        "value_2": "def",
        "value_3": "ghi",
        "value_4": "jkl"
      },
      {
        "value_0": "hello",
        "value_1": "abc",
        "value_2": "def",
        "value_3": "ghi",
        "value_4": "jkl"
      }
    ]
  }
];

Answer 1

1）

any.map(el=>({header:el.header,data: el.data.filter(data=>data[key] && data[key].includes(input))})).filter(el=>el.data.length);

输出：

...
data: [ 
 {
 value_0: "hello",
 value_1: "abc",
 value_2: "def",
 value_3: "ghi",
 value_4: "jkl"
 }
 //second obj removed, as it contains yello != hel 
 ],
 header: "OTHER HEADER"
  ...

http://jsbin.com/higopoloka/edit?console,js

2）如果你只想要'value_0'而不是整个封闭数组，你可以这样做：

any.map(el=>({header:el.header,data: el.data.reduce((arr,obj)=>obj[key]&&obj[key].includes(input)?!arr.push([obj[key]])||arr:arr,[])})).filter(el=>el.data.length);

输出：

[{
   data: [],//ive removed the value_0 here to show what happens
   header: "API"
  },
  {
    data: [["hello"], ["hello"]],
    header: "CLOUD"
  },
  {
   data: [["hello"]],//only one, as yello !== hel
   header: "OTHER HEADER"
  },
  {
   data: [["hello"], ["hello"]],
   header: "YET ANOTHER HEADER"
 }]

1/2）如果您还想要主要元素在数据为空时隐藏，请执行此操作（这已经是高位代码的一部分）：

.filter(el=>el.data.length); 

http://jsbin.com/qabenedite/edit?js,console

Answer 2

您可以在javascript中使用循环来迭代数组并检查是否找到了该数组。 请参阅代码段

 var list = [{"header":"API","data":[{"value_0":"hello","value_1":"abc","value_2":"def","value_3":"ghn","value_4":"l"},{"value_0":"hello","value_1":"abc","value_2":"def","value_3":"ghi","value_4":"jkl"}]},{"header":"CLOUD","data":[{"value_0":"hello","value_1":"abc","value_2":"def","value_3":"ghi","value_4":"jkl"},{"value_0":"hello","value_1":"abc","value_2":"def","value_3":"ghi","value_4":"jkl"}]},{"header":"OTHER HEADER","data":[{"value_0":"hello","value_1":"abc","value_2":"def","value_3":"ghi","value_4":"jkl"},{"value_0":"yello","value_1":"abc","value_2":"def","value_3":"ghi","value_4":"jkl"}]},{"header":"YET ANOTHER HEADER","data":[{"value_0":"hello","value_1":"abc","value_2":"def","value_3":"ghi","value_4":"jkl"},{"value_0":"hello","value_1":"abc","value_2":"def","value_3":"ghi","value_4":"jkl"}]}]; var key = 'value_0'; var val = 'hello'; var search = ''; for(var i in list) { for(var j in list[i]['data']) { if(typeof(list[i]['data'][j][key]) != 'undefined' && list[i]['data'][j][key] == val) { search = list[i]['data'][j]; break; } } } console.log(search)