基于es6中属性名称的动态对象值解析

问题描述 投票:0回答:1
let filter: Product = {
  name: 'nokia',
  price: 20,
  createdDate: '12-12-2019'
}

在这里,我基于过滤器来分解代码。

过滤器具有事件,这些事件以以下格式公开数据:

我有一个表,该表包含过滤器。在过滤器中,有一个事件。过滤器根据选择的过滤器公开数据。如果我选​​择下面的名称,则将其给出。

"filters":{"name ":{"value":"sss","matchMode":"equals"}}
if i choose price  it will given below .

"filters":{"price ":{"value":"20","matchMode":"equals"}}

这里,我已经基于属性对数据进行了结构分解。

  let {name,price,createdDate}= event.filters;

       console.log(name,'name'); // here name  i will get {"value":"20","matchMode":"equals"}

       console.log(price,'price'); // it is undefined.

一旦获得过滤的名称值,我需要映射到产品界面属性值

我需要根据选定的值将值映射为空,其余属性为空。如何进行销毁?

我可以在切换情况下执行此操作,并检查名称并映射值,在es6销毁对象中有任何方法可以执行

我发现的解决方案:

传入的动态对象

let x=  event.filters; // "filters":{"name ":{"value":"sss","matchMode":"equals"}}

//预定义初始值

let filter: Product = {
  name: 'nokia',
  price: 20,
  createdDate: '12-12-2019'
}


// predefinded objects
       for (let property in   filter) {  

        for(let m in x){
inner objects
          if(m === property)
          {
            console.log(`1Object key= ${property}  and 2ObjectValues= ${x[m].value}` );


          // assigned incoming values to matched object property
            filter[property]= x[m].value;


          }

        }
      // console.log(`key= ${property} value = ${filter[property]}`);
     };
typescript ecmascript-6 javascript-objects destructuring ecmascript-7
1个回答
0
投票

从以下位置重构过滤器数据可能更好:

"filters":{"name ":{"value":"sss","matchMode":"equals"}}

到类似的东西:

"filters":[{"field": "name/price/etc", "value":"sss", "matchMode":"equals"}, ...]

因此您可以过滤类似的产品:

filters = event.filters;
const filteredProducts = products.filter(product => {
  for (let i = 0; i < filters.length; i++) {
    const filter = filters[i];
    const val = product[filter.field];
    switch (filter.matchMode) {
      case 'equals':
        if (val !== filter.value) return false;
        break;
      case 'greater':
        if (val <= filter.value) return false;
        break;
      case 'less':
        if (val >= filter.value) return false;
        break;
      // etc...
    }
  }
  return true;
});
© www.soinside.com 2019 - 2024. All rights reserved.