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

Question

I have this code:

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

bloodStores is an array that holds too much data. I looped and I filtered by getting the specific things I want as the above code.

After filtered I got the exact things I needed and all are objects like bellow code:

 {
    "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"
  }

as you see the total of objects are 3 but how do I display that number????

Answer 1

You should do the filtering beforehand and then you can simply render the filtered items or the length of the resulting array. There is no need to do that in 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

You should first use filter method to get a new array with the object that you are interested in and then use length property of an array.

\\ 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