使用陣列的一些鍵格式化物件

它從我的資料庫中得到一個特定的結果，如下所示：

const data = {
  short: 'en',
  element: {
    'dsdsea-22dada-2ffgd-xxada-eeee': { name: 'test name', comment: 'test comment' },
    'adad2a-dda13-dsdad-wwwwd-adaxx': { name: 'name 2' },
}

我想應用一個 JavaScript 操作來獲得這個結果：

[
    {
        short: 'en',
        key: "dsdsea-22dada-2ffgd-xxada-eeee.name"
    value: "test name"
    },
    {
        short: 'en',
        key: "dsdsea-22dada-2ffgd-xxada-eeee.comment"
    value: "test comment"
    },
    {
        short: 'en',
        key: "adad2a-dda13-dsdad-wwwwd-adaxx.name"
    value: "name 2"
    }
]

我嘗試過結合使用 Object.entries 和 map 函式，但我不知道如何處理單個元素物件中的雙鍵。

uj5u.com熱心網友回復：

這可能是實作預期目標的一種可能解決方案。

它使用Object.entries(),.map()和使用反引號 `` 字符.flatMap()的模板文字。

代碼片段

const getTransformedArray = obj => (
  Object.entries(obj.element)   // iterate over 'element' key-value pairs
  .flatMap(([k1, v1]) => (      // k1-v1 where v1 is object (with name, comment props)
    Object.entries(v1)          // iterate over v1's key-value pairs
    .map(([k2, v2]) => ({       // map each iteration
      short: obj.short,         // create the resulting object
      key: `${k1}.${k2}`,       // 'key' is created using k1, k2
      value: v2                 // 'value' is v2 as-is
    }))
  ))                            // '.flatMap' used above avoids nesting of arrays
);

const data = {
  short: 'en',
  element: {
    'dsdsea-22dada-2ffgd-xxada-eeee': { name: 'test name', comment: 'test comment' },
    'adad2a-dda13-dsdad-wwwwd-adaxx': { name: 'name 2' }
  }
};

console.log(getTransformedArray(data));

解釋

上面代碼片段中的行內注釋解釋了代碼是如何作業的。

編輯

答案已更新以使用@pilchard.flatMap()突出顯示的內容。

uj5u.com熱心網友回復：

您將需要兩個回圈來迭代每個element元素的每個值。

這里使用每個for...of回圈，在每個級別解構以將相關名稱應用于每個屬性，然后使用模板文字創建復合值Object.entries()key

const data = {
  short: 'en',
  element: {
    'dsdsea-22dada-2ffgd-xxada-eeee': { name: 'test name', comment: 'test comment' },
    'adad2a-dda13-dsdad-wwwwd-adaxx': { name: 'name 2' },
  }
}

const result = [];
for (const [key, element] of Object.entries(data.element)) {
  for (const [prop, value] of Object.entries(element)) {
    result.push({ short: data.short, key: `${key}.${prop}`, value })
  }
}

console.log(result)

uj5u.com熱心網友回復：

你可以做：

const data = {short: 'en',element: {'dsdsea-22dada-2ffgd-xxada-eeee': {name: 'test name',comment: 'test comment'},'adad2a-dda13-dsdad-wwwwd-adaxx': {name: 'name 2'}}}

const result = Object
  .entries(data.element)
  .reduce((a, [key, obj]) => [
    ...a,
    ...Object
      .values(obj)
      .map(value => ({
        ...{
          short: data.short,
          key
        },
        value
      }))
  ], [])

console.log(result)

uj5u.com熱心網友回復：

用于Object.keys()獲取 中的鍵element，然后使用鍵映射回傳的陣列以訪問每個元素物件，從而獲取名稱。這是完整的代碼片段：

const input = {
    short: 'en',
    element: {
        'dsdsea-22dada-2ffgd-xxada-eeee': { name: 'test name', comment: 'test comment' },
        'adad2a-dda13-dsdad-wwwwd-adaxx': { name: 'name 2' },
    },
};

function format(data = {}) {
    const { short = '', element = {} } = data;

    let result = Object.keys(element).map((key) => {
        return Object.values(element[key]).map((value) => ({ short, key, value }));
    });

    result = result.flat();

    return result;
}

const result = format(input);
console.log(result)

這列印：

[
    {
        "short": "en",
        "key": "dsdsea-22dada-2ffgd-xxada-eeee",
        "value": "test name"
    },
    {
        "short": "en",
        "key": "dsdsea-22dada-2ffgd-xxada-eeee",
        "value": "test comment"
    },
    {
        "short": "en",
        "key": "adad2a-dda13-dsdad-wwwwd-adaxx",
        "value": "name 2"
    }
]

標籤：javascript 节点.js 数组

上一篇：當使用自然數作為陣列索引時，“for(VARinARRAY)”會以正確的順序迭代嗎？

下一篇：從嵌套在陣列反應的物件中過濾陣列