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

Question

我有这个代码：

               {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，但如何显示该数字？？？？

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

Answer 2

您应该首先使用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