根据 javascript 中名为 "PageName" 的键的值按组从对象数组创建一个对象

Question

根据 javascript 中名为“PageName”的键的值按组从对象数组创建一个对象输入：

[
  {"pagename": "Homepage", "key": "TITLE_HEADER", "value": "Login"},
  {"pagename": "OTPpage", "key": "NAVIGATION_TITLE", "value": "OTP"},
  {"pagename": "Homepage", "key": "SUB_HEADER", "value": "Mobile number"},
  {"pagename": "OTPPage", "key": "TITLE_HEADER", "value": "Login"},
  {"pagename": "RegisterPage", "key": "USERNAME_FIELD", "value": "User name"},
  {"pagename": "Homepage", "key": "SUB_HEADER2", "value": "emailId"},
  {"pagename": "RegisterPage", "key": "PASSWORD_FIELD", "value": "Password"}
]

需要 OUT PUT：（按页面名称分组）

{
    "Homepage":{
        "TITLE_HEADER":"Login",
        "SUB_HEADER":"Mobile number",
        "SUB_HEADER2":""emailId"
    },
    "OTPpage":{
        "NAVIGATION_TITLE":"OTP",
        "TITLE_HEADER":"Login"
    },
    "RegisterPage":{
        "USERNAME_FIELD":"User name",
        "PASSWORD_FIELD":"Password"
    }

}

Answer 1

好吧，你可以迭代它。像这样：

常用`forEach()`解法：

const input = [
  {"pagename": "Homepage", "key": "TITLE_HEADER", "value": "Login"},
  {"pagename": "OTPpage", "key": "NAVIGATION_TITLE", "value": "OTP"},
  {"pagename": "Homepage", "key": "SUB_HEADER", "value": "Mobile number"},
  {"pagename": "OTPpage", "key": "TITLE_HEADER", "value": "Login"},
  {"pagename": "RegisterPage", "key": "USERNAME_FIELD", "value": "User name"},
  {"pagename": "Homepage", "key": "SUB_HEADER2", "value": "emailId"},
  {"pagename": "RegisterPage", "key": "PASSWORD_FIELD", "value": "Password"}
]

const result = {};
input.forEach(row => {
  result[row.pagename] = {...(result[row.pagename] || {}), ...{[row.key]: row.value}}
})
console.log(result);

我创建空对象 result，遍历每个 input 并通过 row.pagename 设置键，同时我通过 || 检查 result[row.pagename] 是否存在，这导致到 {} 如果不是然后用 {[row.key]: row.value}} 传播它导致对象合并。

如果您想使用 `reduce()`:

let input = [
  {"pagename": "Homepage", "key": "TITLE_HEADER", "value": "Login"},
  {"pagename": "OTPpage", "key": "NAVIGATION_TITLE", "value": "OTP"},
  {"pagename": "Homepage", "key": "SUB_HEADER", "value": "Mobile number"},
  {"pagename": "OTPpage", "key": "TITLE_HEADER", "value": "Login"},
  {"pagename": "RegisterPage", "key": "USERNAME_FIELD", "value": "User name"},
  {"pagename": "Homepage", "key": "SUB_HEADER2", "value": "emailId"},
  {"pagename": "RegisterPage", "key": "PASSWORD_FIELD", "value": "Password"}
]

const result = input.reduce((accumulator, row) => {
  accumulator[row.pagename] = {...(accumulator[row.pagename] || {}), ...{[row.key]: row.value}};
  return accumulator;
}, {})

console.log(result);

Answer 2

使用reduce()

var list = [
  {"pagename": "Homepage", "key": "TITLE_HEADER", "value": "Login"},
  {"pagename": "OTPpage", "key": "NAVIGATION_TITLE", "value": "OTP"},
  {"pagename": "Homepage", "key": "SUB_HEADER", "value": "Mobile number"},
  {"pagename": "OTPPage", "key": "TITLE_HEADER", "value": "Login"},
  {"pagename": "RegisterPage", "key": "USERNAME_FIELD", "value": "User name"},
  {"pagename": "Homepage", "key": "SUB_HEADER2", "value": "emailId"},
  {"pagename": "RegisterPage", "key": "PASSWORD_FIELD", "value": "Password"}
]

var result = list.reduce((a, v) => {
  a[v.pagename] = a[v.pagename] || {}
  a[v.pagename][v.key] = v.value
  return a
}, {})

console.log(result)

根据 javascript 中名为 "PageName" 的键的值按组从对象数组创建一个对象

Create a object from array of objects by group by value of key called "PageName" in javascript

javascript

arrays

object

ecmascript-6

nested-object

常用`forEach()`解法：

如果您想使用 `reduce()`:

根据 javascript 中名为 "PageName" 的键的值按组从对象数组创建一个对象

Create a object from array of objects by group by value of key called "PageName" in javascript

javascript

arrays

object

ecmascript-6

nested-object

常用forEach()解法：

如果您想使用 reduce():

常用`forEach()`解法：

如果您想使用 `reduce()`: