Question

我正在尝试按以下代码段过滤非数组JSON对象

const filter = { filterRows: ['one'] };

const templateMapper = {
  'one': {
    title: 'one',
  },
  'two': {
    title: 'two',
  },
  'three': {
    title: 'three',
  },
}

const filterDialogView = filter.filterRows;
const filterTemplateMapper = [templateMapper].filter(row => !filterDialogView.includes(row));
console.log(filterTemplateMapper);

但是它没有过滤

我正在关注输出

[
  {
    "one": {
    "title": "one"
  },
  "two": {
    "title": "two"
  },
  "three": {
    "title": "three"
  }
 }
]

期望输出

 {
  "two": {
    "title": "two"
  },
  "three": {
    "title": "three"
  }
 }

我想基于filterRows来过滤行，例如，如果filterRows包含上述JSON的one，那么one应该从templateMapper

中删除

Answer 1

您可以使用Object.fromEntries从过滤的条目中重新构建对象

这里的想法是：-

首先从模板对象获取条目
根据过滤器值过滤条目
使用 Object.fromEntries 从过滤的条目中构建对象

const filter = { filterRows: ['one'] };

const template = {'one': {title: 'one',},'two': {title: 'two',},'three': {title: 'three',}}

const filterDialogView = filter.filterRows;
const final = Object.entries(template).filter(([row])=> !filterDialogView.includes(row))
console.log(Object.fromEntries(final));

如果您的环境不支持Object.fromEntries，则可以使用此

const filter = { filterRows: ['one'] };

const template = {'one': {title: 'one',},'two': {title: 'two',},'three': {title: 'three',}}

const filterDialogView = filter.filterRows;
const final = Object.entries(template).filter(([row])=> !filterDialogView.includes(row))

const output = final.reduce((op,[key,value])=>{
  op[key] = value
  return op
},{})
console.log(output);

Answer 2

您可以先filter对象的entries。然后使用Object.fromEntries()从这些过滤的条目中创建一个新对象。

const filter = { filterRows: ['one'] };

const templateMapper = {
  'one': {
    title: 'one',
  },
  'two': {
    title: 'two',
  },
  'three': {
    title: 'three',
  },
}

const filteredObject = Object.fromEntries(
    Object.entries(templateMapper).filter(([k]) => !filter.filterRows.includes(k))
)

console.log(filteredObject)

Answer 3

一种选择是创建templateMapper对象的副本，然后遍历filterRows并删除每个关联的键：

const filter = {
  filterRows: ['one']
};

const templateMapper = {
  'one': {
    title: 'one',
  },
  'two': {
    title: 'two',
  },
  'three': {
    title: 'three',
  },
};


const filterTemplateMapper = { ...templateMapper };
filter.filterRows.forEach((key) => {
  delete filterTemplateMapper[key];
});
console.log(filterTemplateMapper);

（另请注意，There's no such thing as a "JSON Object"）

Answer 4

您可以filter()个对象。您应该filter()对象的条目，然后使用Object.fromEntries()

将其再次转换为对象

const filter = { filterRows: ['one'] };

const templateMapper = { 'one': { title: 'one', }, 'two': { title: 'two', }, 'three': { title: 'three', }, }

const filterDialogView = filter.filterRows;
const filterTemplateMapper = Object.fromEntries(
             Object.entries(templateMapper)
                   .filter(row => !filterDialogView.includes(row[0].title))
             );
console.log(filterTemplateMapper);

如果您的浏览器不支持Object.fromEntries()，请使用reduce()

const filter = { filterRows: ['one'] };

const templateMapper = { 'one': { title: 'one', }, 'two': { title: 'two', }, 'three': { title: 'three', }, }

const filterDialogView = filter.filterRows;
const filterTemplateMapper = Object.entries(templateMapper)
                   .filter(row =>!filterDialogView.includes(row[0].title))
                   .reduce((ac,[k,v]) => (ac[k] = v,ac),{});
console.log(filterTemplateMapper);

Answer 5

您可以使用这种方式：

const filter = { filterRows: ['one'] };

const templateMapper = {
  'one': {
    title: 'one',
  },
  'two': {
    title: 'two',
  },
  'three': {
    title: 'three',
  },
}

// Convert object templateMapper to array with key
const keyArrayTemplateMapper = Object.keys(templateMapper);

// Filter key array
const filterKey = keyArrayTemplateMapper.filter(key => !filter.filterRows.includes(key));

// Using reduce method to return new array
const output = filterKey.reduce((obj, key) => {
    obj[key] = templateMapper[key];
    return obj;
  }, {});

console.log(output);

Answer 6

代替修改原始对象，而是创建它的副本并删除不需要的键。要删除，您可以使用delete关键字。迭代filterRows数组，然后使用delete从复制的对象中删除键

const filter = {
  filterRows: ['one']
};

const templateMapper = {
  'one': {
    title: 'one',
  },
  'two': {
    title: 'two',
  },
  'three': {
    title: 'three'
  },
}


let newObj = JSON.parse(JSON.stringify(templateMapper));
filter.filterRows.forEach(function(item) {
  if (newObj.hasOwnProperty(item)) {
    delete newObj[item]
  }
});
console.log(newObj)

Answer 7

filter()函数仅在数组上可用。为了使对象具有相同的行为，您需要使用对象的entries()。

const filter = {
  filterRows: ['one']
}

const templateMapper = {
  'one': {
    title: 'one',
  },
  'two': {
    title: 'two',
  },
  'three': {
    title: 'three',
  },
}

const filteredMapper = Object.entries(templateMapper).reduce((acc, [key, value]) => {
  // if the key is not in the filtered list, add this entry to the object
  if (!filter.filterRows.includes(key)) {
    acc[key] = value
  }

  return acc
}, {}) // pass in empty object as initial value of accumulator

console.log(filteredMapper)

此方法的工作方式是，我们首先从entries获得templateMapper（键/值对）。然后，我们获取这些条目并reduce。减少需要几个参数，其中包括一个“累加器”，该累加器收集我们要保留的字段。我们“解构” key和value，以便我们可以检查关键字是否在过滤器列表中。如果不进行过滤，则将其添加到累加器中。然后，我们将累加器返回给reduce的下一个迭代。最后，我们在第一个迭代中传入一个空对象作为累加器的初始值。

JavaScript筛选器非数组JSON对象

7 个答案: