代码之家 › 专栏 › 技术社区 › Bennett Dams

通过相同属性的值按其他对象筛选包含对象的数组

filter json arrays javascript

Bennett Dams · 技术社区 · 8 年前

我想按文本输入字段过滤JSON数据,用于动态创建一个表。每个表头都有自己的输入字段。

将表数据想象成这样:

var data = [{
    id: "1",
    A: "10",
    B: "100",
    C: "1000",
    description: "number 1"
  },
  {
    id: "2",
    A: "20",
    B: "200",
    C: "2000",
    description: "number 2"
  },
  {
    id: "3",
    A: "30",
    B: "300",
    C: "3000",
    description: "number 3"
  }
]

我的输入存储在一个单独的对象中,如下所示:

var filterColumnKeys = {
  A: "20",
  B: "43"
}

此对象包含基于表标题(由表数据动态创建)的搜索输入(值)和键。

我需要用这两个搜索输入(20和43)过滤表数据中的每个对象,因此只显示与搜索输入匹配的对象(=表中的行)。键入时筛选应该是即时的,因此也应该显示部分匹配的短语。

示例1:不会显示任何内容:

var筛选列键={
A:“20”,
B:“43”
}

示例2:将显示ID为2的对象:

var filterColumnKeys = {
  A: "20",
}

示例3:将显示所有对象:

var filterColumnKeys = {
  B: "00",
}

编辑:我已经有了用一个筛选键筛选整个表的功能:

// filter whole table by filter input field
if (filterKey) {
  data = data.filter(function(item) {
    var dataKeys = Object.keys(item);
    return dataKeys.some(function(key) {
      var itemValue = String(item[key]).toLowerCase();
      // int (-1 if not found)
      var itemFound = itemValue.indexOf(filterKey);
      var shouldBeFiltered = itemFound > -1;
      return shouldBeFiltered;
    });
  });
}

..但是定义它只通过键(=表的列)检查相应的数据对象的每个输入在使用 filterColumnKeys 数组。

3 回复 | 直到 8 年前

Akj 8 年前

try solution

A:any='';
  B:any='';

  arr: Array<any> = [{
    id: "1",
    A: "10",
    B: "100",
    C: "1000",
    description: "number 1"
  },
  {
    id: "2",
    A: "20",
    B: "200",
    C: "2000",
    description: "number 2"
  },
  {
    id: "3",
    A: "30",
    B: "300",
    C: "3000",
    description: "number 3"
  }
  ]

  data: any;
  filterData(a,b){

    if(a == "00" || b == "00"){
    this.data = this.arr;
    } else if( a == '' || b == ''){
    this.data = this.data = this.arr.find(obj => obj.A == a || obj.B == b)

    } else if( a != '' && b != '' ){
    this.data = this.arr.find(obj => obj.A == a && obj.B == b)

    }

  }

Leonid Pyrlia 8 年前

Array.prototype.filter

var data=[{id:"1",A:"10",B:"100",C:"1000",description:"number 1"},{id:"2",A:"20",B:"200",C:"2000",description:"number 2"},{id:"3",A:"30",B:"300",C:"3000",description:"number 3"}];

var filterColumnKeys = {
  A: "20"
}


function getFilteredData(data, filterColumnKeys) {

    const fKeys = Object.keys(filterColumnKeys);

    const filtered = data.filter(item => {

        const isMatch = fKeys.every(k => {
            return filterColumnKeys[k] === '00' || item[k] === filterColumnKeys[k];
        })

        return isMatch;

    });

    return filtered;

}

const result = getFilteredData(data, filterColumnKeys);

console.log(result);

Bennett Dams 8 年前

ASDFGerte

  if (filterColumnKeys) {
    if (Object.keys(filterColumnKeys).length !== 0) {
      data = data.filter(e =>
        Object.keys(filterColumnKeys).every(key =>
          String(e[key])
            .toLowerCase()
            .includes(String(filterColumnKeys[key]).toLowerCase())
        )
      );
    }
  }