Question 391536 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Use two diff objects for checkboxes

I have two diff API calls with responses as below:

let ar0 =  { 
  "properties": {
    "role": [ "myservice1", "myservice2", "myservice" ],
    "perm": [ "abcd", "defc", "mnop" ]
  }
};

let ar11 = [{ 
  "role": [ "myservice1", "myservice2" ]
}, {
  "perm": [ "abcd", "defc" ]
}];

I need to create a check box for a key like role and keep the common values (from both the arrays) checked and values available in ar0 to be unchecked. ar11 will always have keys available in ar0 and no extras.

I am trying to implement this as below:

Create a new array by using both the the objects like below and iterate over. The checked key is to keep the checkbox checked and unchecked.

let output =  [{ 
  "role": [{ 
    "cname": "myservice1", 
    "ischecked": true 
  }, { 
    "cname": "myservice2", 
    "ischecked": true 
  }, { 
    "cname": "myservice", 
    "ischecked": false 
  }] 
}, { 
  "perm": [{ 
    "cname": "abcd", 
    "ischecked": true 
  }, { 
    "cname": "defg", 
    "ischecked": true 
  }, { 
    "cname": "mnop", 
    "ischecked": false 
  }]
}]

I’m looking for recommendations on how to implement above functionality

Tags:

2

Answers


  1. 0

    A combination of array methods could help:

    let ar0 =  { 
  "properties": {
    "role": [ "myservice1", "myservice2", "myservice" ],
    "perm": [ "abcd", "defc", "mnop" ]
  }
};

let ar11 = [{ 
  "role": [ "myservice1", "myservice2" ]
}, {
  "perm": [ "abcd", "defc" ]
}];

const result = Object.entries(ar0.properties).map(([key, vals]) => {
  const checks = ar11.find(item => key in item); // get corresponding entry from ar11 with checked values
  return [{ //map values to checked/unchecked objects
    [key]: vals.map(cname => ({cname, isChecked: checks[key].includes(cname)}))
  }];
});

console.log(result);
    Login or Signup to reply.
  2. 0 
    let ar0 = {
  "properties": {
    "role": ["myservice1", "myservice2", "myservice"],
    "perm": ["abcd", "defc", "mnop"]
  }
};

let ar11 = [{
  "role": ["myservice1", "myservice2"]
}, {
  "perm": ["abcd", "defc"]
}];


let out = [];

function filter(obj, arr) {
  for (let prop in obj) {
    if (typeof obj[prop] === 'object' && !Array.isArray(obj[prop])) {
      filter(obj[prop], arr)
    } else {
      let out1 = obj[prop].map((e1) => {
        let obj1 = {};
        let final = arr.map((e2) => {
          if (e2[prop] === undefined) {} else {
            let obj = {
              "cname": e1,
              "ischecked": e2[prop].includes(e1)
            }
            return obj;
          }
        }).filter((item) => !!item)
        obj1[prop] = final;
        return obj1
      })
      out = [...out, ...out1];
    }
  }
  return out;
}

let inputArray = filter(ar0, ar11);
const result = inputArray.reduce((acc, current) => {
  // Get the key of the current object (either 'role' or 'perm')
  const key = Object.keys(current)[0];

  // Initialize the key in the accumulator if not already present
  if (!acc[key]) {
    acc[key] = [];
  }
  // Concatenate the current array to the existing array in the accumulator
  acc[key] = acc[key].concat(current[key]);

  return acc;
}, {});

const finalResult = Object.keys(result).map(key => ({
  [key]: result[key]
}));

console.log(finalResult);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search