Используйте два объекта сравнения для флажков

У меня есть два вызова API различий с ответами, как показано ниже:

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

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

Мне нужно создать флажок для ключа, например role, и сохранить отмеченными общие значения (из обоих массивов), а значения, доступные в ar0, можно снять. В ar11 всегда будут в наличии ключи ar0 и никаких дополнительных услуг.

Я пытаюсь реализовать это, как показано ниже:

Создайте новый массив, используя оба объекта, как показано ниже, и выполните итерацию. Ключ checked — оставлять флажок установленным и снятым.

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 
  }]
}]

Я ищу рекомендации о том, как реализовать вышеуказанную функциональность.

К вашему сведению, ни одна из этих структур данных не является JSON. Я удалил ссылки на это из вашего вопроса

Rory McCrossan 06.06.2024 17:22
Что такое JSON
fdomn-m 06.06.2024 17:32
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
2
95
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Комбинация методов массива может помочь:

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.info(result);

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.info(finalResult);

Ответы, содержащие только код, не являются хорошими ответами. Пожалуйста, укажите, как этот код на самом деле решит проблему.

DarkBee 07.06.2024 08:32

Другие вопросы по теме