When the same field element is transformed into an array of values

Question

When the same field element is transformed into an array of values

I am attempting to create a mapped array with keys similar to the structure below

const data =    [{
          "_id": "5f0ffb96d67d70c1a3b143e7",
          "name": "USER",
          "type": "CUSTOM",
          "origin": "USER",
          "conditions": [{
            "_id": "5f0ffb96d67d70c1a3b143e8",
            "field": "status",
            "value": "Nomita",
            "operator": "equal"
          }, {
            "_id": "5f0ffb96d67d70c1a3b143e9",
            "field": "current_status",
            "value": "ACTIVE",
            "operator": "equal"
          }, {
            "_id": "5f0ffb96d67d70c1a3b143ea",
            "field": "user_group_uuid",
            "value": "d12s0a7c-11ac-7abf-bl03-f0b70e26f8f2",
            "operator": "equal"
          }, {
            "_id": "5f0ffb96d67d70c1a3b143eb",
            "field": "user_group_uuid",
            "value": "20348751-dcaa-4227-a0ff-912b27180aee",
            "operator": "equal"
          }]
        }]

The above code snippet shows the input.

const filters_data = { ...data[0] }
const filters_mapping = (array, keyField) =>
    array.reduce((obj, item) => {
            obj[item[keyField]] = item
            return obj
        }, {})
const filter_items = filters_mapping(filters_data.conditions,'field');

By executing this code, I am currently receiving the following output:

{ user_status:
   { _id: 5f0ffb96d67d70c1a3b143e8,
     field: 'status',
     value: 'Nomita',
     operator: 'equal' },
  current_status:
   { _id: 5f0ffb96d67d70c1a3b143e9,
     field: 'current_status',
     value: 'ACTIVE',
     operator: 'equal' },
  user_group_uuid:
   { _id: 5f0ffb96d67d70c1a3b143eb,
     field: 'user_group_uuid',
     value: 'd12s0a7c-11ac-7abf-bl03-f0b70e26f8f2',
     operator: 'equal' } }

However, what I truly desire is a result like this, where the value is an array when multiple values are available for a single field:

{ user_status:
       { _id: 5f0ffb96d67d70c1a3b143e8,
         field: 'status',
         value: ['Nomita'],
         operator: 'equal' },
      current_status:
       { _id: 5f0ffb96d67d70c1a3b143e9,
         field: 'current_status',
         value: ['ACTIVE'],
         operator: 'equal' },
      user_group_uuid:
       { _id: 5f0ffb96d67d70c1a3b143eb,
         field: 'user_group_uuid',
         value: ['d12s0a7c-11ac-7abf-bl03-f0b70e26f8f2','20348751-dcaa-4227-a0ff-912b27180aee'],
         operator: 'equal' } }

This alteration should only occur when there are multiple fields present. Otherwise, a singular string should be returned as per usual.

javascript arrays json

Answer 1

Answer №1

Hello there, I have implemented your code but with a slight modification where I combine values with the same field value before reducing it. Here is a sample of how it works:

const data = [{
          "_id": "5f0ffb96d67d70c1a3b143e7",
          "name": "USER",
          "type": "CUSTOM",
          "origin": "USER",
          "conditions": [{
            "_id": "5f0ffb96d67d70c1a3b143e8",
            "field": "status",
            "value": "Nomita",
            "operator": "equal"
          }, {
            "_id": "5f0ffb96d67d70c1a3b143e9",
            "field": "current_status",
            "value": "ACTIVE",
            "operator": "equal"
          }, {
            "_id": "5f0ffb96d67d70c1a3b143ea",
            "field": "user_group_uuid",
            "value": "d12s0a7c-11ac-7abf-bl03-f0b70e26f8f2",
            "operator": "equal"
          }, {
            "_id": "5f0ffb96d67d70c1a3b143eb",
            "field": "user_group_uuid",
            "value": "20348751-dcaa-4227-a0ff-912b27180aee",
            "operator": "equal"
          }]
        }]

const conditions_combined = _.uniqWith(data[0].conditions, function(a, b) {
  if (a.field === b.field) {
    b.value += ', ' + a.value;
    b.value = b.value.split(",");
    return true;
  }
});
data[0].conditions = conditions_combined;
const filters_data = { ...data[0] };
const filters_mapping = (array, keyField) =>
    array.reduce((obj, item) => {
            obj[item[keyField]] = item
            return obj
        }, {})
const filter_items = filters_mapping(filters_data.conditions,'field');
console.log(filter_items);

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="503c3f3431233810647e61677e6160">[email protected]</a>/lodash.min.js"></script>

Explanation: The implementation uses _.uniqWith from lodash to merge values with the same field value.

Answer 2

Hello there, I have implemented your code but with a slight modification where I combine values with the same field value before reducing it. Here is a sample of how it works:

const data = [{
          "_id": "5f0ffb96d67d70c1a3b143e7",
          "name": "USER",
          "type": "CUSTOM",
          "origin": "USER",
          "conditions": [{
            "_id": "5f0ffb96d67d70c1a3b143e8",
            "field": "status",
            "value": "Nomita",
            "operator": "equal"
          }, {
            "_id": "5f0ffb96d67d70c1a3b143e9",
            "field": "current_status",
            "value": "ACTIVE",
            "operator": "equal"
          }, {
            "_id": "5f0ffb96d67d70c1a3b143ea",
            "field": "user_group_uuid",
            "value": "d12s0a7c-11ac-7abf-bl03-f0b70e26f8f2",
            "operator": "equal"
          }, {
            "_id": "5f0ffb96d67d70c1a3b143eb",
            "field": "user_group_uuid",
            "value": "20348751-dcaa-4227-a0ff-912b27180aee",
            "operator": "equal"
          }]
        }]

const conditions_combined = _.uniqWith(data[0].conditions, function(a, b) {
  if (a.field === b.field) {
    b.value += ', ' + a.value;
    b.value = b.value.split(",");
    return true;
  }
});
data[0].conditions = conditions_combined;
const filters_data = { ...data[0] };
const filters_mapping = (array, keyField) =>
    array.reduce((obj, item) => {
            obj[item[keyField]] = item
            return obj
        }, {})
const filter_items = filters_mapping(filters_data.conditions,'field');
console.log(filter_items);

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="503c3f3431233810647e61677e6160">[email protected]</a>/lodash.min.js"></script>

Explanation: The implementation uses _.uniqWith from lodash to merge values with the same field value.

Answer 3

Answer №2

One possible solution is presented below.

Your code may not account for scenarios where the key already exists in the data structure.

const data = [{
  "_id": "5f0ffb96d67d70c1a3b143e7",
  "name": "USER",
  "type": "CUSTOM",
  "origin": "USER",
  "conditions": [{
    "_id": "5f0ffb96d67d70c1a3b143e8",
    "field": "status",
    "value": "Nomita",
    "operator": "equal"
  }, {
    "_id": "5f0ffb96d67d70c1a3b143e9",
    "field": "current_status",
    "value": "ACTIVE",
    "operator": "equal"
  }, {
    "_id": "5f0ffb96d67d70c1a3b143ea",
    "field": "user_group_uuid",
    "value": "d12s0a7c-11ac-7abf-bl03-f0b70e26f8f2",
    "operator": "equal"
  }, {
    "_id": "5f0ffb96d67d70c1a3b143eb",
    "field": "user_group_uuid",
    "value": "20348751-dcaa-4227-a0ff-912b27180aee",
    "operator": "equal"
  }]
}];

const mutatedData = data[0].conditions.reduce((temp, {
  _id,
  field,
  value,
  operator,
}) => {
  // Check if the field already exists
  if (temp[field]) {
    temp[field].value = [
      ...(temp[field].value instanceof Array ?
        temp[field].value : [temp[field].value]),

      value,
    ];

    return temp;
  }

  // Handle case where field doesn't exist yet
  temp[field] = {
    _id,
    field,
    value,
    operator,
  };

  return temp;
}, {});


console.log(mutatedData);

Shortened version

const data = [{
  "_id": "5f0ffb96d67d70c1a3b143e7",
  "name": "USER",
  "type": "CUSTOM",
  "origin": "USER",
  "conditions": [{
    "_id": "5f0ffb96d67d70c1a3b143e8",
    "field": "status",
    "value": "Nomita",
    "operator": "equal"
  }, {
    "_id": "5f0ffb96d67d70c1a3b143e9",
    "field": "current_status",
    "value": "ACTIVE",
    "operator": "equal"
  }, {
    "_id": "5f0ffb96d67d70c1a3b143ea",
    "field": "user_group_uuid",
    "value": "d12s0a7c-11ac-7abf-bl03-f0b70e26f8f2",
    "operator": "equal"
  }, {
    "_id": "5f0ffb96d67d70c1a3b143eb",
    "field": "user_group_uuid",
    "value": "20348751-dcaa-4227-a0ff-912b27180aee",
    "operator": "equal"
  }]
}];

const mutatedData = data[0].conditions.reduce((temp, {
  _id,
  field,
  value,
  operator,
}) => (temp[field] = temp[field] ? ((temp[field].value = [
  ...(temp[field].value instanceof Array ?
    temp[field].value : [temp[field].value]),

  value,
]) && temp[field]) : {
  _id,
  field,
  value,
  operator,
}) && temp, {});

console.log(mutatedData);

Answer 4

One possible solution is presented below.

Your code may not account for scenarios where the key already exists in the data structure.

const data = [{
  "_id": "5f0ffb96d67d70c1a3b143e7",
  "name": "USER",
  "type": "CUSTOM",
  "origin": "USER",
  "conditions": [{
    "_id": "5f0ffb96d67d70c1a3b143e8",
    "field": "status",
    "value": "Nomita",
    "operator": "equal"
  }, {
    "_id": "5f0ffb96d67d70c1a3b143e9",
    "field": "current_status",
    "value": "ACTIVE",
    "operator": "equal"
  }, {
    "_id": "5f0ffb96d67d70c1a3b143ea",
    "field": "user_group_uuid",
    "value": "d12s0a7c-11ac-7abf-bl03-f0b70e26f8f2",
    "operator": "equal"
  }, {
    "_id": "5f0ffb96d67d70c1a3b143eb",
    "field": "user_group_uuid",
    "value": "20348751-dcaa-4227-a0ff-912b27180aee",
    "operator": "equal"
  }]
}];

const mutatedData = data[0].conditions.reduce((temp, {
  _id,
  field,
  value,
  operator,
}) => {
  // Check if the field already exists
  if (temp[field]) {
    temp[field].value = [
      ...(temp[field].value instanceof Array ?
        temp[field].value : [temp[field].value]),

      value,
    ];

    return temp;
  }

  // Handle case where field doesn't exist yet
  temp[field] = {
    _id,
    field,
    value,
    operator,
  };

  return temp;
}, {});


console.log(mutatedData);

Shortened version

const data = [{
  "_id": "5f0ffb96d67d70c1a3b143e7",
  "name": "USER",
  "type": "CUSTOM",
  "origin": "USER",
  "conditions": [{
    "_id": "5f0ffb96d67d70c1a3b143e8",
    "field": "status",
    "value": "Nomita",
    "operator": "equal"
  }, {
    "_id": "5f0ffb96d67d70c1a3b143e9",
    "field": "current_status",
    "value": "ACTIVE",
    "operator": "equal"
  }, {
    "_id": "5f0ffb96d67d70c1a3b143ea",
    "field": "user_group_uuid",
    "value": "d12s0a7c-11ac-7abf-bl03-f0b70e26f8f2",
    "operator": "equal"
  }, {
    "_id": "5f0ffb96d67d70c1a3b143eb",
    "field": "user_group_uuid",
    "value": "20348751-dcaa-4227-a0ff-912b27180aee",
    "operator": "equal"
  }]
}];

const mutatedData = data[0].conditions.reduce((temp, {
  _id,
  field,
  value,
  operator,
}) => (temp[field] = temp[field] ? ((temp[field].value = [
  ...(temp[field].value instanceof Array ?
    temp[field].value : [temp[field].value]),

  value,
]) && temp[field]) : {
  _id,
  field,
  value,
  operator,
}) && temp, {});

console.log(mutatedData);

When the same field element is transformed into an array of values

Answer №1

Answer №2

Similar questions

Pattern to find a particular, multi-line item within JSON array

Obtaining a JSON file from Firebase Storage

What can be done to ensure that two separate react-native Picker components do not interfere with each other's

Embedding complex JSON information into an HTML dropdown menu

What is the best way to implement multiple preload scripts for various Electron windows when utilizing electron forge with the webpack template?

What is the best way to iterate over an associative array and display the contents as a list?

Query multiple tables in SQL, performing multiple joins to include a column field that displays a list separated by commas

Getting the location of a mouse click and adding tags (marks) on an image: a simple guide

Unable to navigate a simulated scrollbar

Arrange the array in chronological order based on the month and year

The frustrating error of ember-data duplicating records is causing quite a

Implementing HTML content inside an el-select component in Vue.js using Element UI

Adding an array to an object within an array using AngularJS

Issues with PHP not reflecting changes to MySQL database

The JavaScript audio is not working for the first three clicks, but starts playing smoothly from the fourth click onwards. What could be causing this issue?

tips for changing a json string into yaml format

Retrieve the element from the most recent append() function invocation

Challenges with removing and adding controllers in Angular versions 1.2 and above

Discovering a specific element using jQuery

Setting a Vue property on an object