Уменьшить массив до определенной структуры, используя JavaScript

Question

У меня есть массив объектов

[
    {"id":"brand","label":"Brand","value":"value1"},    
    {"id":"waterproof","label":"Waterproof","value":"value1"},
    {"id":"diameter","label":"Diameter","value":""},
    {"id":"brand","label":"Brand","value":"value2"},
    {"id":"waterproof","label":"Waterproof","value":"value2"},
    {"id":"diameter","label":"Diameter","value":""}
]

Мне нужно реструктурировать его в следующую структуру,

[
    ["Brand", "value1", "value2"], 
    ["Waterproof", "value1","value2"], 
    ["Diameter","",""]
]

Любые идеи о том, как я мог бы сделать это, используя метод Reduce.

Лучший

Answer 1

Здесь я использую Set для создания уникального списка id, а затем I map для создания пользовательского массива на основе этих id.Это делается с помощью команды find для получения метки и фильтра для получения всех элементов, связанных с id.Я снова сопоставляю фильтр, чтобы просто вернуть value объекта.

let items = [
    {"id":"brand","label":"Brand","value":"value1"},    
    {"id":"waterproof","label":"Waterproof","value":"value1"},
    {"id":"diameter","label":"Diameter","value":""},
    {"id":"brand","label":"Brand","value":"value2"},
    {"id":"waterproof","label":"Waterproof","value":"value2"},
    {"id":"diameter","label":"Diameter","value":""}
]

let result = [...new Set(items.map(i => i.id))]
  .map(id => {
    return [
      items.find(i => i.id == id).label,
      ...items.filter(i => i.id == id).map(i => i.value)
    ]
  })

console.log(result)

Answer 2

Вы также можете использовать простую комбинацию Array.prototype.reduce и Object.keys:

const data = [{"id":"brand","label":"Brand","value":"value1"},{"id":"waterproof","label":"Waterproof","value":"value1"},{"id":"diameter","label":"Diameter","value":""},{"id":"brand","label":"Brand","value":"value2"},{"id":"waterproof","label":"Waterproof","value":"value2"},{"id":"diameter","label":"Diameter","value":""}];

const grouped = data.reduce((o, { label, value }) =>
    ({...o, [label]: [...(o[label] || []), value]}), {});

const result = Object.keys(grouped).map(label => [label, ...grouped[label]]);

console.log(result);

Answer 3

В случае, если массив JSON очень длинный из некоторого API

var data = [
    {"id":"brand","label":"Brand","value":"value1"},    
    {"id":"waterproof","label":"Waterproof","value":"value1"},
    ...... //some JSON array form some API
];
var json = JSON.stringify(data);

result = Array.from(JSON
    .parse(json)
    .reduce((m, { id, label, value }) => m.set(id, (m.get(id) || [label]).concat(value)), new Map)
    .values()
);
console.log(result);

Answer 4

Не лучший код, но я думаю, что это может быть полезно для вас:

let data = [
        {"id":"brand","label":"Brand","value":"value1"},    
        {"id":"waterproof","label":"Waterproof","value":"value1"},
        {"id":"diameter","label":"Diameter","value":""},
        {"id":"brand","label":"Brand","value":"value2"},
        {"id":"waterproof","label":"Waterproof","value":"value2"},
        {"id":"diameter","label":"Diameter","value":""}
    ]

    let reducedData = {}
    data.forEach((row)=>{
        reducedData[row.id] ? reducedData[row.id].push(row.value) : reducedData[row.id] = [row.label, row.value]    
    })
    let newData = Object.keys(reducedData).map((id)=>{return [...reducedData[id]]})

Answer 5

Попробуйте выполнить, используя Array.reduce и Object.values ​​

let arr = [{"id":"brand","label":"Brand","value":"value1"},{"id":"waterproof","label":"Waterproof","value":"value1"},{"id":"diameter","label":"Diameter","value":""},{"id":"brand","label":"Brand","value":"value2"},{"id":"waterproof","label":"Waterproof","value":"value2"},{"id":"diameter","label":"Diameter","value":""}];

let result = Object.values(arr.reduce((a,c) => {
  if(a[c.id]) a[c.id].push(c.value);
  else a[c.id] = [c.label, c.value];
  return a;
}, {}));
console.log(result);

Answer 6

Просто возьмите Map и соберите все значения.

var json = '[{"id":"brand","label":"Brand","value":"value1"},{"id":"waterproof","label":"Waterproof","value":"value1"},{"id":"diameter","label":"Diameter","value":""},{"id":"brand","label":"Brand","value":"value2"},{"id":"waterproof","label":"Waterproof","value":"value2"},{"id":"diameter","label":"Diameter","value":""}]',
    result = Array.from(JSON
        .parse(json)
        .reduce((m, { id, label, value }) => m.set(id, (m.get(id) || [label]).concat(value)), new Map)
        .values()
    );
    
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }