How to filter and map array such that false values of visible are eliminated

Question

I have the following array, further details below

[
    {
        "__typename": "Decor",
        "itemNum": 1,
        "purchaseDate": "2021-04-04",
        "description": "fdsf",
        "alterations": true,
        "cost": 44,
        "pieces": 3,
        "category": "Curation",
        "purchaser": "fdsfa",
        "image": "df",
        "_id": "293164620554699277",
        "visible": false
    },
    {
        "__typename": "Decor",
        "itemNum": 2,
        "purchaseDate": "2021-04-02",
        "description": "Blue Jeansgfg",
        "alterations": true,
        "cost": 33,
        "pieces": 33,
        "category": "Curation",
        "purchaser": "fdsf",
        "image": "fds",
        "_id": "293164663883956749",
        "visible": false
    },
    {
        "__typename": "Decor",
        "itemNum": 3,
        "purchaseDate": "2021-03-24",
        "description": "fdsfsa",
        "alterations": true,
        "cost": 3,
        "pieces": 4,
        "category": "Curation",
        "purchaser": "fdsfa",
        "image": "fds",
        "visible": false
    },
    {
        "__typename": "Decor",
        "itemNum": 4,
        "purchaseDate": "2021-03-12",
        "description": "Pair of Michaels SHoes",
        "alterations": true,
        "cost": 5,
        "pieces": 2,
        "category": "Curation",
        "purchaser": "fdsfa",
        "image": "fdf",
        "visible": true
    }
]

That I am mapping, then filtering, then mapping over, it does what I expect mostly but the result has empty array values and I just want them to be removed all together.

const massaged = decorData?.findUserByID?.decor?.data?.map((item) => {
    var col = Object.values(item);

    return col
      .filter(function (hype) {
        console.log(hype);
        if (item.visible === false) {
          return false;
        }
        return true;
      })
      .map((colItem, i) => {
        return { [`col${i}`]: colItem };
      });
  });

Here is the result, I want all the [] array values removed. I'm not quite sure why they are just returning empty instead of just removed all together

[
    [], //I WANT ALL THESE EMPTY ARRAYS REMOVED
    [], //I WANT ALL THESE EMPTY ARRAYS REMOVED
    [], //I WANT ALL THESE EMPTY ARRAYS REMOVED
    [
        {
            "col0": "Decor"
        },
        {
            "col1": 4
        },
        {
            "col2": "2021-03-12"
        },
        {
            "col3": "Pair of Michaels SHoes"
        },
        {
            "col4": true
        },
        {
            "col5": 5
        },
        {
            "col6": 2
        },
        {
            "col7": "Curation"
        },
        {
            "col8": "fdsfa"
        },
        {
            "col9": "fds.png"
        },
        {
            "col10": "294069217411465741"
        },
        {
            "col11": true
        }
    ]
]

Thanks ahead of time

score 2 · Accepted Answer · answered Mar 26 '21 at 03:01

You need to first filter the overall array before splitting the remaining objects into pieces:

const massaged = data
  .filter(item => item.visible)
  .map(o => Object.values(o)
    .map((v, i) => ({ [`col${i}`]: v }))
  );

const data = [{
    "__typename": "Decor",
    "itemNum": 1,
    "purchaseDate": "2021-04-04",
    "description": "fdsf",
    "alterations": true,
    "cost": 44,
    "pieces": 3,
    "category": "Curation",
    "purchaser": "fdsfa",
    "image": "df",
    "_id": "293164620554699277",
    "visible": false
  },
  {
    "__typename": "Decor",
    "itemNum": 2,
    "purchaseDate": "2021-04-02",
    "description": "Blue Jeansgfg",
    "alterations": true,
    "cost": 33,
    "pieces": 33,
    "category": "Curation",
    "purchaser": "fdsf",
    "image": "fds",
    "_id": "293164663883956749",
    "visible": false
  },
  {
    "__typename": "Decor",
    "itemNum": 3,
    "purchaseDate": "2021-03-24",
    "description": "fdsfsa",
    "alterations": true,
    "cost": 3,
    "pieces": 4,
    "category": "Curation",
    "purchaser": "fdsfa",
    "image": "fds",
    "visible": false
  },
  {
    "__typename": "Decor",
    "itemNum": 4,
    "purchaseDate": "2021-03-12",
    "description": "Pair of Michaels SHoes",
    "alterations": true,
    "cost": 5,
    "pieces": 2,
    "category": "Curation",
    "purchaser": "fdsfa",
    "image": "fdf",
    "visible": true
  }
]

const massaged = data
  .filter(item => item.visible)
  .map(o => Object.values(o)
    .map((v, i) => ({ [`col${i}`]: v }))
  );
  
console.log(massaged)

How to filter and map array such that false values of visible are eliminated

1 Answers1