將帶有數據的對象轉換為帶有鍵和值列表的對象 - javascript

Question

我正在努力將數據序列化為新結構，並希望為其找到更好的解決方案。

我有來自這種結構的 API 的數據：

  const filters = {
     category: ['Football', 'Soccer'],
     subcategory: ['Tactic', 'Frighting'],
     action: ['Kicking', 'Shooting']
  };

我想把它轉換成這個結構：

const options = {
category: [
    {
        value: 'Football',
        label: 'Football'
    },
    {
        value: 'Soccer',
        label: 'Soccer'
    }
],
subCategory: [
    {
        value: 'Tactic',
        label: 'Tactic'
    },
    {
        value: 'Frighting',
        label: 'Frighting'
    }
],
action: [
    {
        value: 'Kicking',
        label: 'Kicking'
    },
    {
        value: 'Shooting',
        label: 'Shooting'
    }
]
};

幫助表示贊賞！ 謝謝。

Answer 1

使用 reduce 和 map 您可以遍歷對象並對其進行轉換。

 const filters = { category: ['Football', 'Soccer'], subcategory: ['Tactic', 'Frighting'], action: ['Kicking', 'Shooting'] }; const keyConversion = { subcategory: 'subCategory' } const result = Object.entries(filters).reduce((obj, [key, arr]) => { const mappedKey = keyConversion[key] || key; obj[mappedKey] = arr.map(val => ({ name: val, value: val })); return obj; }, {}); console.log(result);

Answer 2

你可以這樣做：

let options = Object.keys(filters).map(key => {
  return {
    [key]: filters[key].map(filter => {
      return {
        value: filter,
        label: filter
      }
    })

  }
})

 const filters = { category: ['Football', 'Soccer'], subcategory: ['Tactic', 'Frighting'], action: ['Kicking', 'Shooting'] } let options = Object.keys(filters).map(key => { return { [key]: filters[key].map(filter => { return { value: filter, label: filter } }) } }) console.log(options)

Answer 3

使用for..in迭代Object和.map數組助手

 const filters = { category: ['Football', 'Soccer'], subcategory: ['Tactic', 'Frighting'], action: ['Kicking', 'Shooting'] }; const result = {} for (key in filters) { result[key] = filters[key].map(v => ({value: v, label: v})) } console.log(result)

Answer 4

您可以將整個對象映射到新的[key, value]條目，其中值是數組的映射版本。 一旦你有了新的[key, value]對數組，你可以使用Object.fromEntries()來構建你的結果對象：

 const filters = {category: ['Football', 'Soccer'], subcategory: ['Tactic', 'Frighting'], action: ['Kicking', 'Shooting'] }; const res = Object.fromEntries(Object.entries(filters).map( ([k, arr]) => [k, arr.map(v => ({value:v, label:v}))] )); console.log(res);

Answer 5

謝謝大家，我終於使用了這種方式：

  const { ...sportFilters } = queryData;
  const filterKeys = keys(sportFilters);
  const filterOptions = reduce(
    filterKeys,
    (acc, key) => {
       return {
         ...acc,
         [key]: map(sportFilters[key], value => ({
         value,
         label: value
       }))
     };
   },
 {}
);