Объедините массивы и объедините ключи для вывода таблицы

Question

Я загружаю несколько данных в массивы. Теперь я хочу объединить массивы и объединить их с символьными клавишами. Идея состоит в том, чтобы вывести его в таблицу, подобную этой, чтобы сравнить разные цены:

Name|Price1|Price2|Price3|
CAT |  10  |  20  |  15  |
DOG |  15  |  25  |  13  |
etc |..    |..

Массивы отформатированы так:

Массив 1:

[
  {
    "symbol": "CAT",
    "price": "10"
  },
  {
    "symbol": "DOG ",
    "price": "15"
  }
]

Массив 2:

[
  {
    "symbol": "CAT",
    "price": "20"
  },
  {
    "symbol": "DOG ",
    "price": "25"
  }
]

Массив 3:

[
  {
    "symbol": "CAT",
    "price": "15"
  },
  {
    "symbol": "DOG ",
    "price": "13"
  }
]

Моя попытка:

var combine = Object.entries(array1, array2, array3)
      .map((k, v) => {
        Object.assign(
          { symbol: k.symbol },
          { price: v.price }
        )
      })

Как мне добиться этого с помощью ES6?

Answer 1

Конечно, существует множество сценариев, в которых вы хотите передавать данные, и лучший план - преобразовать один формат данных в другой. Однако, если вы просто создаете таблицу из этих данных, вы заканчиваете тем, что перебираете свои данные один раз, чтобы создать новый формат, а затем перебираете этот новый формат, чтобы создать свою таблицу. Вы смотрите на каждый фрагмент данных дважды.

Вы можете просто составить таблицу, повторяя первый раз. Является ли это хорошей идеей, зависит от информации, которой нет в вопросе, но я подумал, что поделюсь, если она окажется полезной:

let arr1 = [{  "symbol": "CAT",  "price": "10"},{  "symbol": "DOG ",  "price": "15"}]
let arr2 = [{  "symbol": "CAT",  "price": "20"},{  "symbol": "DOG ",  "price": "25"}]
let arr3 = [{  "symbol": "CAT",  "price": "15"},{  "symbol": "DOG ",  "price": "13"}]

let arrays = [...arr1, ...arr2, ...arr3]
let table = document.getElementById('theTable')

arrays.reduce((rows, {symbol, price}) => {
    let row = rows[symbol]
    if (!row) { // haven't seen this symbol? Make a new row
      row = document.createElement("tr")
      let data = document.createElement("td")
      data.innerHTML = symbol
      row.appendChild(data)
      table.appendChild(row)
      rows[symbol] = row
    }
    let data = document.createElement("td")
    data.innerHTML = price
    row.appendChild(data)
    return rows
}, {})

td {
  padding:1em;
  border: 1px solid #ddd;
}

<table id="theTable"></table>

Answer 2

Вы должны сначала объединить 3 массива, а затем использовать reduce, чтобы создать нужный объект

const array1 = [{"symbol": "CAT","price": "10"},{"symbol": "DOG ","price": "15"}],
      array2 = [{"symbol": "CAT","price": "20"},{"symbol": "DOG ","price": "25"}],
      array3 = [{"symbol": "CAT","price": "15"},{"symbol": "DOG ","price": "13"}];

const combined = [...array1, ...array2, ...array3].reduce((p, {
  symbol,
  price
}) => {
  const current = p[symbol];
  if (!current) p[symbol] = [price];
  if (current) p[symbol].push(price);
  return p;
}, {});

console.log(combined)

Answer 3

let finalArray=[...a1,...a2,...a3];
let obj={};

finalArray.forEach(element=>{
   obj.hasOwnProperty(element.symbol) ? 
      obj[element.symbol].push(element.price) :
          obj[element.symbol] =[element.price];
});

obj будет наконец содержать следующее Object:

{CAT: [10, 20, 15], DOG: [15, 25, 13]}

Answer 4

Если вы просто ищете способ преобразовать эти данные в более полезный формат, следующая функция выдаст:

{CAT: [10, 20, 15], DOG: [15, 25, 13]}

Затем вы можете использовать это для создания таблицы.Если вам нужна помощь в преобразовании этого формата в формат отображения, пожалуйста, уточните здесь или задайте другой вопрос.

const makeTable = (...data) => data.reduce(
  (tbl, arr) => arr.reduce(
    (tbl, {price, symbol}) => 
      ((tbl[symbol] || (tbl[symbol] = [])).push(price), tbl),
    tbl
  ), {}
)

const arr1 = [{"price": "10", "symbol": "CAT"}, {"price": "15", "symbol": "DOG "}]
const arr2 = [{"price": "20", "symbol": "CAT"}, {"price": "25", "symbol": "DOG "}]
const arr3 = [{"price": "15", "symbol": "CAT"}, {"price": "13", "symbol": "DOG "}]

console.log(makeTable(arr1, arr2, arr3))