A guide to implementing child level filtering of JSON data with Lodash

Question

A guide to implementing child level filtering of JSON data with Lodash

Here is a JSON dataset I am working with:

[
  {
    "campaignId": 111,
    "campaignCategory": "Diabetes",
    "result": [
      {
        "campaignType": 1,
        "name": "tes1"
      },
      {
        "campaignType": 1,
        "name": "test22"
      },
      {
        "campaignType": 3,
        "name": "test33"
      }
    ]
  },
  {
    "campaignId": 222,
    "campaignCategory": "Orthopedic",
    "result": [
      {
        "campaignType": 1,
        "name": "Orthopedic"
      }
    ]
  },
  {
    "campaignId": 333,
    "campaignCategory": "Cardiology",
    "result": [
      {
        "campaignType": 3,
        "name": "Cardiology"
      },
      {
        "campaignType": 1,
        "name": "Cardiology 123"
      }
    ]
  }
]

I tried the following filter but it did not return the desired data:

_.filter(summary, function (data) {
 return (post, _.filter(data.result, {'campaignType': 3}));

I am looking to obtain the following data after applying the filter:

[{ campaignId: 111, campaignCategory: 'Diabetes', result: [{
  campaignType: 3, name: 'test33'
}] }, 
{ campaignId: 333, campaignCategory: 'Cardiology', result: [{
  campaignType: 3, name: 'Cardiology'
}] } ];

Only nodes with campaignType: 3 are displayed in the filtered result. Either a Lodash or pure JavaScript solution will be suitable.

javascript json lodash

Answer 1

Answer №1

To identify objects in an array that contain a specific item with a designated value and then add them to a new array, you can utilize the reduce method. In this case, the requirement is to search for objects with a .result property where the campaignType is equal to 3:

const findOutput = () => {
  const outputList = arr.reduce((accumulator, item) => {
    const results = item.result.filter(({ campaignType }) => campaignType === 3);
    if (results.length) {
      accumulator.push({ ...item, result: results });
    }
    return accumulator;
  }, []);
  console.log(outputList);
};

const arr = [{
    campaignId: 111,
    campaignCategory: 'Diabetes',
    result: [{
      campaignType: 1,
      name: 'tes1'
    }, {
      campaignType: 1,
      name: 'test22'
    }, {
      campaignType: 3,
      name: 'test33'
    }]
  },
  {
    campaignId: 222,
    campaignCategory: 'Orthopedic',
    result: [{
      campaignType: 1,
      name: 'Orthopedic'
    }]
  },
  {
    campaignId: 333,
    campaignCategory: 'Cardiology',
    result: [{
        campaignType: 3,
        name: 'Cardiology'
      },
      {
        campaignType: 1,
        name: 'Cardiology 123'
      }
    ]
  }
];
findOutput();

Answer 2

To identify objects in an array that contain a specific item with a designated value and then add them to a new array, you can utilize the reduce method. In this case, the requirement is to search for objects with a .result property where the campaignType is equal to 3:

const findOutput = () => {
  const outputList = arr.reduce((accumulator, item) => {
    const results = item.result.filter(({ campaignType }) => campaignType === 3);
    if (results.length) {
      accumulator.push({ ...item, result: results });
    }
    return accumulator;
  }, []);
  console.log(outputList);
};

const arr = [{
    campaignId: 111,
    campaignCategory: 'Diabetes',
    result: [{
      campaignType: 1,
      name: 'tes1'
    }, {
      campaignType: 1,
      name: 'test22'
    }, {
      campaignType: 3,
      name: 'test33'
    }]
  },
  {
    campaignId: 222,
    campaignCategory: 'Orthopedic',
    result: [{
      campaignType: 1,
      name: 'Orthopedic'
    }]
  },
  {
    campaignId: 333,
    campaignCategory: 'Cardiology',
    result: [{
        campaignType: 3,
        name: 'Cardiology'
      },
      {
        campaignType: 1,
        name: 'Cardiology 123'
      }
    ]
  }
];
findOutput();

Answer 3

Answer №2

If you want to optimize your code, consider filtering the inner result array first and then selecting the outer objects if any filtered elements exist. Afterwards, create a new object with the filtered result.

var data = [{ campaignId: 111, campaignCategory: 'Diabetes', result: [{ campaignType: 1, name: 'tes1' }, { campaignType: 1, name: 'test22' }, { campaignType: 3, name: 'test33' }] }, { campaignId: 222, campaignCategory: 'Orthopedic', result: [{ campaignType: 1, name: 'Orthopedic' }] }, { campaignId: 333, campaignCategory: 'Cardiology', result: [{ campaignType: 3, name: 'Cardiology' }, { campaignType: 1, name: 'Cardiology 123' }] }], 
    result = data.reduce((r, o) => {
        var result = o.result.filter(({ campaignType}) => campaignType === 1);
        if (result.length) r.push(Object.assign({}, o, { result }));
        return r;
    }, []);

console.log(result);

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

Answer 4

If you want to optimize your code, consider filtering the inner result array first and then selecting the outer objects if any filtered elements exist. Afterwards, create a new object with the filtered result.

var data = [{ campaignId: 111, campaignCategory: 'Diabetes', result: [{ campaignType: 1, name: 'tes1' }, { campaignType: 1, name: 'test22' }, { campaignType: 3, name: 'test33' }] }, { campaignId: 222, campaignCategory: 'Orthopedic', result: [{ campaignType: 1, name: 'Orthopedic' }] }, { campaignId: 333, campaignCategory: 'Cardiology', result: [{ campaignType: 3, name: 'Cardiology' }, { campaignType: 1, name: 'Cardiology 123' }] }], 
    result = data.reduce((r, o) => {
        var result = o.result.filter(({ campaignType}) => campaignType === 1);
        if (result.length) r.push(Object.assign({}, o, { result }));
        return r;
    }, []);

console.log(result);

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

Answer 5

Answer №3

In vanilla JavaScript, one way to filter and map data is by using the combination of filter and some along with map.

var data = [{ campaignId: 111, campaignCategory: 'Diabetes', result: [{
  campaignType: 1, name: 'tes1'
},{
  campaignType: 1, name: 'test22'
},{
  campaignType: 3, name: 'test33'
}] },
{  campaignId: 222, campaignCategory: 'Orthopedic', result: [{
  campaignType: 1, name: 'Orthopedic'
}] }, 
{ campaignId: 333, campaignCategory: 'Cardiology', result: [{
  campaignType: 3, name: 'Cardiology'
},
{
  campaignType: 1, name: 'Cardiology 123'
}]} ];


var res = data.filter(campaign => campaign.result.some(type => type.campaignType === 3));

res = res.map(campaign => {
        campaign.result = campaign.result.filter(type => type.campaignType ===3);
        return campaign;
      });


console.log(res);

Answer 6

In vanilla JavaScript, one way to filter and map data is by using the combination of filter and some along with map.

var data = [{ campaignId: 111, campaignCategory: 'Diabetes', result: [{
  campaignType: 1, name: 'tes1'
},{
  campaignType: 1, name: 'test22'
},{
  campaignType: 3, name: 'test33'
}] },
{  campaignId: 222, campaignCategory: 'Orthopedic', result: [{
  campaignType: 1, name: 'Orthopedic'
}] }, 
{ campaignId: 333, campaignCategory: 'Cardiology', result: [{
  campaignType: 3, name: 'Cardiology'
},
{
  campaignType: 1, name: 'Cardiology 123'
}]} ];


var res = data.filter(campaign => campaign.result.some(type => type.campaignType === 3));

res = res.map(campaign => {
        campaign.result = campaign.result.filter(type => type.campaignType ===3);
        return campaign;
      });


console.log(res);

Answer 7

Answer №4

To achieve the desired outcome, you can utilize a combination of Array.reduce and Array.forEach methods:

const data = [{ "campaignId": 111, "campaignCategory": "Diabetes", "result": [{ "campaignType": 1, "name": "tes1" }, { "campaignType": 1, "name": "test22" }, { "campaignType": 3, "name": "test33" } ] }, { "campaignId": 222, "campaignCategory": "Orthopedic", "result": [{ "campaignType": 1, "name": "Orthopedic" }] }, { "campaignId": 333, "campaignCategory": "Cardiology", "result": [{ "campaignType": 3, "name": "Cardiology" }, { "campaignType": 1, "name": "Cardiology 123" } ] }];

const result = data.reduce((accumulator, { result, ...rest }) => {
  result.forEach(item => item.campaignType === 3 ? accumulator.push({ ...rest, result: [item] }) : null);
  return accumulator;
}, []);

console.log(result);

Answer 8

To achieve the desired outcome, you can utilize a combination of Array.reduce and Array.forEach methods:

const data = [{ "campaignId": 111, "campaignCategory": "Diabetes", "result": [{ "campaignType": 1, "name": "tes1" }, { "campaignType": 1, "name": "test22" }, { "campaignType": 3, "name": "test33" } ] }, { "campaignId": 222, "campaignCategory": "Orthopedic", "result": [{ "campaignType": 1, "name": "Orthopedic" }] }, { "campaignId": 333, "campaignCategory": "Cardiology", "result": [{ "campaignType": 3, "name": "Cardiology" }, { "campaignType": 1, "name": "Cardiology 123" } ] }];

const result = data.reduce((accumulator, { result, ...rest }) => {
  result.forEach(item => item.campaignType === 3 ? accumulator.push({ ...rest, result: [item] }) : null);
  return accumulator;
}, []);

console.log(result);

A guide to implementing child level filtering of JSON data with Lodash

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

ActiveRecord::RecordInvalid: The validation process has failed: User entries must be valid

Is it possible to load babel-polyfill using <script async> tag?

Creating a C# Web API that Only Returns Values, Not Keys

Developing typeScript code that can be easily translated and optimized for various web browsers

Utilize Redux-forms to trigger an alternative submission method when ComponentWillRecieveProps is called

javascript - determine whether a hyperlink has been accessed

What is the best way to change a date-containing string into a Json object?

Using an external JavaScript script may encounter difficulties when loading pages with jQuery

What is the process of connecting JSON keys to one another?

Embed a JSON within another JSON in Oracle 19 database management system

What is the best way to retrieve the data stored in a TD element within a TR row in an HTML table?

Dealing with the element not present error in Protractor can be managed by using various

Checking if the upload process has been completed using XMLHttpRequest Level 2

AntDesign is throwing an error stating that resetFields is not a function when using

Storing JSON string values in String parameters: A beginner's guide

Submit a POST request using CoffeeScript to get a string from the returned object

"Troubleshooting issue with AngularJS ng-repeat order by functionality based on

There are no headers present in the response from apollo-client

Disappearing input field in DateTimePicker Bootstrap when blurred

Exploring ways to personalize the parsing of url query parameters in express.js