如何将多个对象转换为单个数组并计算JavaScript中对象的长度?

时间:2020-10-01 14:58:32

标签: javascript node.js arrays reactjs object

我有此代码:

               {bloodStores &&
                  bloodStores.map((store) => {
                    if (
                      store.status === "Stock" &&
                      store.blood_component === "Whole Blood" &&
                      store.blood_group === "O+"
                    ) {
                      {
                       {' display the length of objects '}
                      }
                    }
                  })}

bloodStores 是一个包含过多数据的数组。 我循环并通过上面的代码获取想要的特定内容进行过滤。

过滤后,我得到了我需要的确切东西,所有东西都是类似下面的代码:

 {
    "donor": "caamir yusuf ali",
    "hb": "18.13",
    "blood_group": "O+",
    "blood_component": "Whole Blood",
    "unit": "500",
    "bag": "K020068931",
    "status": "Stock"
  },
  {
    "donor": "zakariye mohamed adan",
    "hb": "16.71",
    "blood_group": "O+",
    "blood_component": "Whole Blood",
    "unit": "500",
    "bag": "K02059689",
    "status": "Stock"
  },
  {
    "donor": "cabdirashid colaad hassan",
    "hb": "17.55",
    "blood_group": "O+",
    "blood_component": "Whole Blood",
    "unit": "250",
    "bag": "EE559895",
    "status": "Stock"
  }

您看到的对象总数为3,但是如何显示该数字????

2 个答案:

答案 0 :(得分:1)

您应该事先进行过滤,然后可以简单地渲染过滤后的项目或结果数组的长度。无需在jsx中执行此操作:

const availableZeroPositiveWholeBlood = bloodStores.filter(
    ({status, blood_component, blood_group}) => (
        status === "Stock" 
        && blood_component === "Whole Blood" 
        && blood_group === "O+"
    )
)

return <p>{availableZeroPositiveWholeBlood.length}</p>;

答案 1 :(得分:1)

您应该首先使用filter方法来获取具有您感兴趣的对象的新数组,然后使用数组的length属性。

\\ before you return from your component, filter out the array
const filteredBloodStores = bloodStores.filter(store => (store.status === "Stock" 
    && store.blood_component === "Whole Blood" 
    && store.blood_group === "O+"));

\\ and in your render, you can get length of that array
filteredBloodStores.length