Get the difference of several arrays that are inside other arrays in javascript-CodePudding

I have the following json from which I read the data:

[
  {
    "id": 1,
    "brand":"Mike",
    "cycle": "C1",
    "sides": {
      "1": {"sideName":"A",
          "active": false},
      "2": {"sideName":"B",
          "active": false},
      "3": {"sideName":"C",
          "active": true}
    }
  },
  {
    "id": 2,
    "brand":"Luis",
    "cycle": "C2",
    "sides": {
      "1": {"sideName":"A",
          "active": false},
      "2": {"sideName":"B",
          "active": false},
      "3": {"sideName":"C",
          "active": true},
      "4": {"sideName":"D",
          "active": true}
    }
  },
  {
    "id": 3,
    "brand":"Lucas",
    "cycle": "Z1",
    "sides": {
      "1": {"sideName":"H",
          "active": false},
      "2": {"sideName":"U",
          "active": false},
      "3": {"sideName":"L",
          "active": true},
      "4": {"sideName":"A",
          "active": true}
    }
  },
  {
    "id": 4,
    "brand":"Edd",
    "cycle": "R1",
    "sides": {
      "1": {"sideName":"A",
          "active": false},
      "2": {"sideName":"B",
          "active": false},
      "3": {"sideName":"C",
          "active": true},
      "4": {"sideName":"Q",
          "active": true}
    }
  }
]

I need to keep an array containing all the common 'sidenames' without repeating them. I'm using react jsx but a pure js solution would work for me. Example:

result = ["A", "B", "C", "D", "H", "U", "L", "Q"]

CodePudding user response：

Use Set for this. A set is a collection of unique items:

const items = [
  {
    "id": 1,
    "brand":"Mike",
    "cycle": "C1",
    "sides": {
      "1": {"sideName":"A",
          "active": false},
      "2": {"sideName":"B",
          "active": false},
      "3": {"sideName":"C",
          "active": true}
    }
  },
  {
    "id": 2,
    "brand":"Luis",
    "cycle": "C2",
    "sides": {
      "1": {"sideName":"A",
          "active": false},
      "2": {"sideName":"B",
          "active": false},
      "3": {"sideName":"C",
          "active": true},
      "4": {"sideName":"D",
          "active": true}
    }
  },
  {
    "id": 3,
    "brand":"Lucas",
    "cycle": "Z1",
    "sides": {
      "1": {"sideName":"H",
          "active": false},
      "2": {"sideName":"U",
          "active": false},
      "3": {"sideName":"L",
          "active": true},
      "4": {"sideName":"A",
          "active": true}
    }
  },
  {
    "id": 4,
    "brand":"Edd",
    "cycle": "R1",
    "sides": {
      "1": {"sideName":"A",
          "active": false},
      "2": {"sideName":"B",
          "active": false},
      "3": {"sideName":"C",
          "active": true},
      "4": {"sideName":"Q",
          "active": true}
    }
  }
]

const uniqueSideNames = new Set();

for (const item of items) {
  for (const side of Object.values(item.sides)) {
    uniqueSideNames.add(side.sideName);
  }
}

console.log([...uniqueSideNames]);

CodePudding user response：

One option is to first reduce your list to just the items that you need and flatMap them to be one flattened array.

items.flatMap(item => Object.values(item.sides).map(side => side.sideName))

This will give you a flattened list of all sideNames including duplicates.

A Set datastructure is a data structure that only allows unique items, so adding all of these items to a set and then converting them back to an array will dedupe for you.

That might look like:

Array.from(new Set(items.flatMap(item => 
  Object.values(item.sides)
        .map(side => side.sideName)))
);

CodePudding user response：

After differentiate objects as their sideName, you can use new Set. It sets in order to create arrays without duplicate values.

[...new Set(items.flatMap(item=> Object.values(item.sides)).map(eachSide=> eachSide.sideName))]

Output: ['A', 'B', 'C', 'D', 'H', 'U', 'L', 'Q']

CodePudding user response：

const arr = [{
    "id": 1,
    "brand": "Mike",
    "cycle": "C1",
    "sides": {
      "1": {
        "sideName": "A",
        "active": false
      },
      "2": {
        "sideName": "B",
        "active": false
      },
      "3": {
        "sideName": "C",
        "active": true
      }
    }
  },
  {
    "id": 2,
    "brand": "Luis",
    "cycle": "C2",
    "sides": {
      "1": {
        "sideName": "A",
        "active": false
      },
      "2": {
        "sideName": "B",
        "active": false
      },
      "3": {
        "sideName": "C",
        "active": true
      },
      "4": {
        "sideName": "D",
        "active": true
      }
    }
  },
  {
    "id": 3,
    "brand": "Lucas",
    "cycle": "Z1",
    "sides": {
      "1": {
        "sideName": "H",
        "active": false
      },
      "2": {
        "sideName": "U",
        "active": false
      },
      "3": {
        "sideName": "L",
        "active": true
      },
      "4": {
        "sideName": "A",
        "active": true
      }
    }
  },
  {
    "id": 4,
    "brand": "Edd",
    "cycle": "R1",
    "sides": {
      "1": {
        "sideName": "A",
        "active": false
      },
      "2": {
        "sideName": "B",
        "active": false
      },
      "3": {
        "sideName": "C",
        "active": true
      },
      "4": {
        "sideName": "Q",
        "active": true
      }
    }
  }
]

const result = []

arr.forEach(({
  sides
}) => {
  for (const key in sides) {
    if (!result.includes(sides[key].sideName)) result.push(sides[key].sideName)
  }
})

console.log(result)