Question

我想在多个属性上过滤对象数组，但我总是得到整个数据。我只想获得过滤后的数据，例如['data_x']。我的代码出了什么问题？

export const testData= [

      {
        "data_z": {
          "points": [
            {
              "name": "Juli",
              "geb": "27.12.1982",
              "lastname": 'Peter'
            }
          ]
        },
        "data_x": {
          "points": [
            {
              "name": "Dennis",
              "geb": "27.12.1981",
              "lastname": 'Peter'
            }
          ]
        },
        "data_p": {
          "points": [
            {
              "name": "Janni",
              "geb": "27.12.1980",
              "lastname": 'Peter'
            }
          ]
        }
      }
    ]


let filterData = ['data_x', 'data_y'];

let testData = this.filterChartData(filterData);
console.log(testData);// ---> here I am getting the entire data

filterChartData(filterKeys){
    return this.testData.filter((item) => {
        return filterKeys.every(key => item[key]);
 });
  }

Answer 1

我只想获取过滤后的数据，例如[＆＃39; data_x＆＃39;]

使用filter和map

var allKeys = testData.map( s => Object.keys(s) )[0];

console.log(filterData.filter( s => allKeys.includes(s) ).map( s => testData[0][s] ));

<强>演示

＆＃13;

var testData = [
  {
    "data_z": {
      "points": [{
        "name": "Juli",
        "geb": "27.12.1982",
        "lastname": 'Peter'
      }]
    },
    "data_x": {
      "points": [{
        "name": "Dennis",
        "geb": "27.12.1981",
        "lastname": 'Peter'
      }]
    },
    "data_p": {
      "points": [{
        "name": "Janni",
        "geb": "27.12.1980",
        "lastname": 'Peter'
      }]
    }
  }
];

let filterData = ['data_x', 'data_y'];

var allKeys = testData.map( s => Object.keys(s) )[0];

console.log(filterData.filter( s => allKeys.includes(s) ).map( s => testData[0][s] ));

＆＃13;

Answer 2

来自filter函数的

返回一个布尔值，在你的情况下条件将比较键

新生成的数组将具有从过滤函数

返回值为true的元素

Answer 3

您的代码不会循环所有对象数组，它只是创建一个包含2个字符串'data_x'和＆amp;的数组。 'data_y'，你的方法的调用在这些字符串和方法的结果之间循环（并且这不是TS语法的良好因素）这可能有所帮助：

let filteredTestData = testData.map(test => [test.data_p, test.data_x])

console.log(filteredTestData)

Answer 4

诺亚，我从你的评论中得知，你主要想了解为什么你的代码没有产生预期的结果，而不是接收一个有效的解决方案。你走了：

问题＃1：

“过滤器”方法不会过滤您认为过滤的内容。在'testData'数组上调用'filter'方法，该数组中只有一个对象元素。您尝试过滤的对象嵌套在该单个对象中。因此，在'testData'上调用'filter'只能返回：

包含单个对象的数组，就像'testData'或
空数组

问题＃2：

我不认为'every'方法正在做你认为正在做的事情。如上所述，您为“每个”提供的条件是测试以确保所有过滤器键都作为属性键存在于对象上并具有真值。因此，在您的代码中，“every”将执行以下操作：

返回true 引用了一个真正的价值
返回false 如果某些引用的值是伪造的，则
返回false

更多信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/every

我已使用以下代码演示了这一点：

// simplifying testData to make it easier to read and understand

let testData = [ // this is the array that testData references

  { // this is the 'parent' object that constitutes the single element of testData

    // these are nested objects within that single object element
    'data_z': { 'points': 'this is data_z' },
    'data_x': { 'points': 'this is data_x' },
    'data_p': { 'points': 'this is data_p' },

  }

];

function filterChartData(filterKeys) {
  return testData.filter((item) => {
    return filterKeys.every(key => item[key]);
  });
}

// returns an array like the original testData, because the single object in testData matches the test condition put forward by 'every':
// Why? 'data_x' and 'data_z' are present as property keys on the object, and both reference truthy values
console.log('Result #1: ', filterChartData(['data_x', 'data_z']));

// returns an empty array, because the single object in testData does NOT match the test condition put forward by 'every':
// Why? 'data_y' is not present as a property key on the object
console.log('Result #2: ', filterChartData(['data_x', 'data_y']));


// assigning a different value to testData to show a different condition

testData = [

  {

    'data_z': { 'points': 'this is data_z' },
    'data_x': { 'points': 'this is data_x' },
    'data_p': undefined,

  }

];

// returns an empty array, because the single object in testData does NOT match the test condition put forward by 'every':
// Why? 'data_p' is present as a property key but is undefined and therefore falsy
console.log('Result #3: ', filterChartData(['data_x', 'data_p']));

使用filter和every筛选多个属性的数组

4 个答案: