Javascript 过滤非数组 JSON 对象

Question

我正在尝试将非数组 JSON 对象过滤为以下 sn-p

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 包含 one 如上所述 JSON，则应从 templateMapper 中删除 one

Answer 1

一种选择是创建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 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

您可以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 4

您可以使用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 5

不要修改原始对象，而是创建它的副本并删除不需要的键。对于删除，您可以使用 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 6

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)

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

Answer 7

你可以这样使用：

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);