Remove any objects from the array that have empty values when filtered

Question

Remove any objects from the array that have empty values when filtered

I am facing a challenge with filtering objects in an array. Each object contains a title and rows, where the rows also have a risk value (like P1, P2, P3, etc.). My goal is to extract only the rows that have a risk equal to P1 while skipping any objects that do not contain any P1 risks.

let data = [ 
    {
        "title": "QA",
        "rows": [
            {
                "risk": "P3",
                "Title": "Permission issue",
            }
        ]
    }, 
    {
        "title": "Prod",
        "rows": [
            {
                "risk": "P5",
                "Title": "Console log errors fix",
            },
            {
                "risk": "P1",
                "Title": "Server is in hung state",
            }
        ]
    }
]

The desired result should look like this:

    {
        "title": "Prod",
        "rows": [
            {
                "risk": "P1",
                "Title": "Server is in hung state",
            }
        ]
    }
]

Currently, the code I tried includes titles even if they do not have any P1 risks. Can someone provide a solution to filter out objects without P1 risks entirely?

javascript arrays json loops object

Answer 1

Answer №1

Create a fresh list by filtering out items with P1 risk in their rows.

data.reduce((accumulator, element) => {
  const filteredRows = element.rows.filter(rowItem => rowItem.risk === 'P1');
  if (filteredRows.length === 0) return accumulator;
  return [...accumulator, {...element, filteredRows }]
}, [])

Answer 2

Create a fresh list by filtering out items with P1 risk in their rows.

data.reduce((accumulator, element) => {
  const filteredRows = element.rows.filter(rowItem => rowItem.risk === 'P1');
  if (filteredRows.length === 0) return accumulator;
  return [...accumulator, {...element, filteredRows }]
}, [])

Answer 3

Answer №2

To easily remove objects that do not have the specific risk level of "P1", you can leverage the power of Array.prototype.filter function.

const data = [     {        "title": "QA",        "rows": [            {                "risk": "P3",                "Title": "Permission issue",            }        ]    },     {        "title": "Prod",        "rows": [            {                "risk": "P5",                "Title": "Console log errors fix",            },            {                "risk": "P1",                "Title": "Server is in hung state",            }        ]    }],
      result = structuredClone(data).filter(o => {
        o.rows = o.rows.filter(({risk}) => risk === "P1");
        return !!o.rows.length;
      });
      
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 4

To easily remove objects that do not have the specific risk level of "P1", you can leverage the power of Array.prototype.filter function.

const data = [     {        "title": "QA",        "rows": [            {                "risk": "P3",                "Title": "Permission issue",            }        ]    },     {        "title": "Prod",        "rows": [            {                "risk": "P5",                "Title": "Console log errors fix",            },            {                "risk": "P1",                "Title": "Server is in hung state",            }        ]    }],
      result = structuredClone(data).filter(o => {
        o.rows = o.rows.filter(({risk}) => risk === "P1");
        return !!o.rows.length;
      });
      
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 5

Answer №3

Instead of relying on a map, I recommend utilizing a filter method to achieve the desired outcome:

const result = data.filter((obj) => {
  let includesP1 = false;
  obj.rows.forEach((r) => {
    if (r.risk === "P1") includesP1 = true;
  });
  return includesP1;
});

Answer 6

Instead of relying on a map, I recommend utilizing a filter method to achieve the desired outcome:

const result = data.filter((obj) => {
  let includesP1 = false;
  obj.rows.forEach((r) => {
    if (r.risk === "P1") includesP1 = true;
  });
  return includesP1;
});

Answer 7

Answer №4

By utilizing the reduce function, you can easily eliminate any non P1 risks from your dataset.

const data = [
  { title: "QA", rows: [{ risk: "P3", Title: "Permission issue" }] },
  {
    title: "Prod",
    rows: [
      { risk: "P5", Title: "Console log errors fix" },
      { risk: "P1", Title: "Server is in hung state" },
    ],
  },
];

const result = data.reduce((acc, d) => {
  const rows = d.rows.filter(({ risk }) => risk === "P1");
  if (rows.length) {
    acc.push({ ...d, rows });
  }
  return acc;
}, []);

console.log(result);

An Alternative Method

You could also first filter out the data containing at least one instance of a P1 risk, followed by removing all other non P1 risks from the filtered data.

const data = [
  { title: "QA", rows: [{ risk: "P3", Title: "Permission issue" }] },
  {
    title: "Prod",
    rows: [
      { risk: "P5", Title: "Console log errors fix" },
      { risk: "P1", Title: "Server is in hung state" },
    ],
  },
];

const result = data
  .filter(({ rows }) => rows?.some(({ risk }) => risk === "P1"))
  .map((d) => ({ ...d, rows: d.rows.filter(({ risk }) => risk === "P1") }));

console.log(result);

Helpful Resources:

Answer 8

By utilizing the reduce function, you can easily eliminate any non P1 risks from your dataset.

const data = [
  { title: "QA", rows: [{ risk: "P3", Title: "Permission issue" }] },
  {
    title: "Prod",
    rows: [
      { risk: "P5", Title: "Console log errors fix" },
      { risk: "P1", Title: "Server is in hung state" },
    ],
  },
];

const result = data.reduce((acc, d) => {
  const rows = d.rows.filter(({ risk }) => risk === "P1");
  if (rows.length) {
    acc.push({ ...d, rows });
  }
  return acc;
}, []);

console.log(result);

An Alternative Method

You could also first filter out the data containing at least one instance of a P1 risk, followed by removing all other non P1 risks from the filtered data.

const data = [
  { title: "QA", rows: [{ risk: "P3", Title: "Permission issue" }] },
  {
    title: "Prod",
    rows: [
      { risk: "P5", Title: "Console log errors fix" },
      { risk: "P1", Title: "Server is in hung state" },
    ],
  },
];

const result = data
  .filter(({ rows }) => rows?.some(({ risk }) => risk === "P1"))
  .map((d) => ({ ...d, rows: d.rows.filter(({ risk }) => risk === "P1") }));

console.log(result);

Helpful Resources:

Answer 9

Answer №5

To achieve this, the following steps can be taken:


  // A function is created to check if a row has risk P1
  const hasRiskP1 = (row) => { return row.risk === 'P1' };

  // The code filters out all rows that do not contain P1
  // Then it filters out any entries that do not have any rows left
  const result = data.map(entry => ({...entry, ...{rows: entry.rows.filter(hasRiskP1)}}))
                     .filter(entry => entry.rows.length);

Answer 10

To achieve this, the following steps can be taken:


  // A function is created to check if a row has risk P1
  const hasRiskP1 = (row) => { return row.risk === 'P1' };

  // The code filters out all rows that do not contain P1
  // Then it filters out any entries that do not have any rows left
  const result = data.map(entry => ({...entry, ...{rows: entry.rows.filter(hasRiskP1)}}))
                     .filter(entry => entry.rows.length);

Remove any objects from the array that have empty values when filtered

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Ways to update a single column in an HTML table when there is a change

Negative vibes with for/in loop

Using a promise instead of resolving it with Angular's $q.then() methodology

I am experiencing difficulty in detecting variable changes within my $scope function

When executing `npm run start`, a blank page appears exclusively on the server

req.next does not exist as a function [END]

Attempting to share a message via Curl

Tips for integrating custom images or icons into Onsen-UI:

Unable to scroll to the top of the page with JavaScript

The fadein feature in Deps.Autorun is not functioning as expected in Meteor version 0.5.9

The following error occurred: Next Auth TypeError: URL is not valid

Encountered an issue when trying to establish a connection to the MySQL database on Openshift using a

Utilizing the Loess npm module in conjunction with Angular 4

One issue with my Quiz app is that sometimes the correct and incorrect answer methods run concurrently, leading to occasional occurrences of this problem

Guide to making a button in jQuery that triggers a function with arguments

I've encountered some issues with importing pagination from modules after installing SwiperJs

Utilize Vue to localize the click events of buttons on the webpage

Anticipated the server's HTML to have a corresponding "a" tag within it

Unable to interact with a button through JavaScript using execute_script in Selenium

Obtain the attribute value from an HTML option element