Filtering nested arrays within an array with a condition object in typescript

Question

Filtering nested arrays within an array with a condition object in typescript

My object array (in Json format) looks like this:

var datas = [
  {
    "Id": "1",
    // Includes 10 fields
    "tests": [
            {
                "id":"1-1",
                "isSelected": true,
            },
            {
                "id":"1-2",
                "isSelected": false,
            },
        ]
  },
  {
    "Id": "2",
    // Includes 10 fields
    "tests": [
            {
                "id":"2-1",
                "isSelected": true,
            },
            {
                "id":"2-2",
                "isSelected": true,
            },
        ]
  },
  {
    "Id": "3",
    // Includes 10 fields
    "tests": [
            {
                "id":"3-1",
                "isSelected": false,
            },
            {
                "id":"3-2",
                "isSelected": false,
            },
        ]
  }
]

After trying the code below:

var filteredData = datas.filter( t => t.tests.filter(o => o.isSelected));

I need the data in the following format:

[
  {
    "Id": "1",
    // Includes 10 fields
    "t": [
            {
                "id":"1-1",
                "isSelected": true,
            }
        ]
  },
  {
    "Id": "2",
    // Includes 10 fields
    "tests": [
            {
                "id":"2-1",
                "isSelected": true,
            },
            {
                "id":"2-2",
                "isSelected": true,
            },
        ]
  }
]

javascript typescript ecmascript-6

Answer 1

Answer №1

You're making progress in the right direction, however, there is a slight error in your code. You are currently returning the inner filter result (an array) from your outer filter callback. Since an array is truthy, everything is being kept.

To correct this, you need to handle each outer object in two steps:

Filter its tests, and
Remove it completely if its tests is empty.

Here is the corrected code snippet:

var filteredData = datas.filter(t => {
  t.tests = t.tests.filter(o => o.isSelected);
  return t.tests.length !== 0;
});

var datas = [
  {
    "Id": "1",
    // Here 10 fields
    "tests": [
            {
                "id":"1-1",
                "isSelected": true,
            },
            {
                "id":"1-2",
                "isSelected": false,
            },
        ]
  },
  {
    "Id": "2",
    // Here 10 fields
    "tests": [
            {
                "id":"2-1",
                "isSelected": true,
            },
            {
                "id":"2-2",
                "isSelected": true,
            },
        ]
  },
  {
    "Id": "3",
    // Here 10 fields
    "tests": [
            {
                "id":"3-1",
                "isSelected": false,
            },
            {
                "id":"3-2",
                "isSelected": false,
            },
        ]
  }
]

var filteredData = datas.filter(t => {
  t.tests = t.tests.filter(o => o.isSelected);
  return t.tests.length !== 0;
});

console.log(filteredData);

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

If you prefer a more concise arrow function, you can use the following:

Updated code snippet:

var filteredData = datas.filter(t =>
  (t.tests = t.tests.filter(o => o.isSelected)).length !== 0
);

var datas = [
  {
    "Id": "1",
    // Here 10 fields
    "tests": [
            {
                "id":"1-1",
                "isSelected": true,
            },
            {
                "id":"1-2",
                "isSelected": false,
            },
        ]
  },
  {
    "Id": "2",
    // Here 10 fields
    "tests": [
            {
                "id":"2-1",
                "isSelected": true,
            },
            {
                "id":"2-2",
                "isSelected": true,
            },
        ]
  },
  {
    "Id": "3",
    // Here 10 fields
    "tests": [
            {
                "id":"3-1",
                "isSelected": false,
            },
            {
                "id":"3-2",
                "isSelected": false,
            },
        ]
  }
]

var filteredData = datas.filter(t =>
  (t.tests = t.tests.filter(o => o.isSelected)).length !== 0
);

console.log(filteredData);

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

Answer 2

You're making progress in the right direction, however, there is a slight error in your code. You are currently returning the inner filter result (an array) from your outer filter callback. Since an array is truthy, everything is being kept.

To correct this, you need to handle each outer object in two steps:

Filter its tests, and
Remove it completely if its tests is empty.

Here is the corrected code snippet:

var filteredData = datas.filter(t => {
  t.tests = t.tests.filter(o => o.isSelected);
  return t.tests.length !== 0;
});

var datas = [
  {
    "Id": "1",
    // Here 10 fields
    "tests": [
            {
                "id":"1-1",
                "isSelected": true,
            },
            {
                "id":"1-2",
                "isSelected": false,
            },
        ]
  },
  {
    "Id": "2",
    // Here 10 fields
    "tests": [
            {
                "id":"2-1",
                "isSelected": true,
            },
            {
                "id":"2-2",
                "isSelected": true,
            },
        ]
  },
  {
    "Id": "3",
    // Here 10 fields
    "tests": [
            {
                "id":"3-1",
                "isSelected": false,
            },
            {
                "id":"3-2",
                "isSelected": false,
            },
        ]
  }
]

var filteredData = datas.filter(t => {
  t.tests = t.tests.filter(o => o.isSelected);
  return t.tests.length !== 0;
});

console.log(filteredData);

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

If you prefer a more concise arrow function, you can use the following:

Updated code snippet:

var filteredData = datas.filter(t =>
  (t.tests = t.tests.filter(o => o.isSelected)).length !== 0
);

var datas = [
  {
    "Id": "1",
    // Here 10 fields
    "tests": [
            {
                "id":"1-1",
                "isSelected": true,
            },
            {
                "id":"1-2",
                "isSelected": false,
            },
        ]
  },
  {
    "Id": "2",
    // Here 10 fields
    "tests": [
            {
                "id":"2-1",
                "isSelected": true,
            },
            {
                "id":"2-2",
                "isSelected": true,
            },
        ]
  },
  {
    "Id": "3",
    // Here 10 fields
    "tests": [
            {
                "id":"3-1",
                "isSelected": false,
            },
            {
                "id":"3-2",
                "isSelected": false,
            },
        ]
  }
]

var filteredData = datas.filter(t =>
  (t.tests = t.tests.filter(o => o.isSelected)).length !== 0
);

console.log(filteredData);

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

Filtering nested arrays within an array with a condition object in typescript

Answer №1

Similar questions

The JavaScript code is not functioning properly on the server after the ajax request

Incorporate live Twitch streaming onto a web platform

Can the grunt command be executed automatically after saving code in TypeScript?

Looking to add a dynamic divider between two columns that can be adjusted in width by moving the mouse left and right?

The WHATWG URL API allows creation of a new URL using the new URL

Prevent dragging functionality in ckeditor

I must automate the process of navigating to a different page within my website

Retrieve the value of a promise and transfer it to the subsequent function of an observable

Add the teams-js library to your Vue.js project

The JavaScript counterpart to jQuery's click event handler

Issue with updating dropdown values in real-time in React

Tips for concealing the URL in the address bar while using `<a href>` links

Displaying the current time and total time of a custom video player using Javascript

Troubleshooting problems in transferring JSON data between a React application and a Spring Boot service running locally

Error message: "Receiving a 'TypeError' in Node.js async parallel - the task is not recognized as a

PHP enables users to look at manual values in columns and MySQL values row by row

Iterating through every image displayed on a webpage

Error encountered with TypeScript compiler when using a React Stateless Function component

Struggling to figure out how to make Bootstrap toast close or autohide properly

Using the ng-repeat directive in an angular-nvd3 tooltip