Как извлечь значения и создать новый объект, как показано ниже

Question

У меня есть следующие объекты:

const tagA = {
  color: ['red', 'green'],
  type: { a: 10, b:7}...
};
const tagB = {
  color: ['blue', 'red'],
  type: { b:54, z:10} .... 
};
const tagC = {
  color: ['red', 'green', 'yellow'],
  type: { a: 13, b:17}...
};

Я хочу иметь возможность создать новый объект, как показано ниже:

const colorFilter = {
   red: ['tagA', 'tagC'],
   green: ['tagA', 'tagC'],
   blue: ['tagB'],
   yellow: ['tagC']
};

Answer 1

const tagA = {color: ['red', 'green'],type: {a: 10,b: 7}}
const tagB = {color: ['blue', 'red'],type: {b: 54,z: 10}}
const tagC = {color: ['red', 'green', 'yellow'],type: {a: 13,b: 17}}
const tags = [tagA,tagB,tagC]
let colors = []
tags.forEach(t=>t.color.forEach(c=>colors.push(c)))
colors = colors.filter((c,i)=>colors.indexOf(c)===i)
let Color = {}
colors.forEach(c=>Color[c]=tags.filter(t=>t.color.includes(c)))
console.log(Color)

Answer 2

Вы можете использовать функцию, как показано ниже getColorFilter. Узнать больше о Object.entries(), flatMap и reduce.

Примечание Вам необходимо пройти object как getColorFilter({ tagA, tagB, tagC });. Или вы можете создать новый объект, например let obj = { tagA, tagB, tagC }; и getColorFilter(obj);

function getColorFilter(tags) {
  return Object.entries(tags)
    .flatMap(([key, val]) => val.color.map(c => ({ tag: key, color: c })))
    .reduce((acc, x) => {
      acc[x.color] = acc[x.color] || [];
      acc[x.color].push(x.tag);
      return acc;
    }, {})
}

const tagA = {
  color: ['red', 'green']
};
const tagB = {
  color: ['blue', 'red']
};
const tagC = {
  color: ['red', 'green', 'yellow']
};

const colorFilter = getColorFilter({ tagA, tagB, tagC });
console.log(colorFilter);

Answer 3

const tagA = {
  color: ['red', 'green'],
  type: {
    a: 10,
    b: 7
  }
};
const tagB = {
  color: ['blue', 'red'],
  type: {
    b: 54,
    z: 10
  }
};
const tagC = {
  color: ['red', 'green', 'yellow'],
  type: {
    a: 13,
    b: 17
  }
};
const tags = {
  tagA: tagA,
  tagB: tagB,
  tagC: tagC
};
let tagsTest = Object.keys(tags);
let colorFilter = {};
tagsTest.forEach(t => {
  tags[t].color.forEach(l => {
    if (colorFilter.hasOwnProperty(l)) {
      colorFilter[l].push(t);
      }
    else {
        colorFilter[l] = [t];
        }
    }
  )
});
console.log(colorFilter);

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>    const tagA = {
      color: ['red', 'green'],
      type: {
        a: 10,
        b: 7
      }
    };
    const tagB = {
      color: ['blue', 'red'],
      type: {
        b: 54,
        z: 10
      }
    };
    const tagC = {
      color: ['red', 'green', 'yellow'],
      type: {
        a: 13,
        b: 17
      }
    };
    const tags = {
      tagA: tagA,
      tagB: tagB,
      tagC: tagC
    };
    let tagsTest = Object.keys(tags);
    let colorFilter = {};
    tagsTest.forEach(t => {
      tags[t].color.forEach(l => {
        if (colorFilter.hasOwnProperty(l)) {
          colorFilter[l].push(t);
          }
        else {
            colorFilter[l] = [t];
            }
        }
      )
    });
    console.log(colorFilter);

Я думаю, что смог решить эту проблему с помощью вышеуказанного подхода. Если есть более простой способ, дайте мне знать.