將動態列表轉換為 JSON object

Question

我允許我的用戶在我的 svelteKit 應用程序中為自己創建不同的角色。 我有一個帶有按鈕的文本輸入，該按鈕將該值添加到數組並顯示在下面的 div 中。

我需要將該數組轉換為分層的 JSON object 以便我可以將其作為 JSONB 添加到我的 Postgres 數據庫role_permissions列。 我試過JSON.stringify()和JSON.parse()但我無法讓它工作。

理想的格式如下：

{
  "role_name"{
            "permission": true,
            "permission": true,
             ...
             }
  "role_name_2"{
            "permission": true,
            "permission": false,
             ...
             }
}

雖然我的用戶可以創建具有自定義名稱的角色，但可用的權限都是相同的，例如：

can_add_members: false,
can_delete_members: false,
can_edit_members: false,

can_create_roles: false,
can_delete_roles: false,
can_edit_roles: false,
can_assign_roles: false,

can_create_projects: false,
can_delete_projects: false,
can_edit_projects: false,
can_publish_projects: false,
can_view_projects: false,

can_assign_members_to_projects: false,

我不知道如何將 object 轉換為分層的 JSON 格式。 我知道我需要在每個 object 之外的某種密鑰，但我不知道該怎么做。

這是它們在console.log()中的顯示方式

{name: "Partner", can_add_members: false, can_delete_members: false, can_edit_members: false, can_create_roles: false, …}
{name: "Associate Partner", can_add_members: false, can_delete_members: false, can_edit_members: false, can_create_roles: false, …}

實際代碼：

    let newItem = '';
    
    // An array of the roles names that will also be saved to the database as is.
    let roleList = [];

    // The array that needs to be converted to JSON
    let roleListWithPermissions = [],
    
    function addToList() {
        roleList = [...roleList, {text: newItem,}];

        roleListWithPermissions = [...roleListWithPermissions, {
            "name": newItem,
            "can_add_members": false,
            "can_delete_members": false,
            "can_edit_members": false,

            "can_create_roles": false,
            "can_delete_roles": false,
            "can_edit_roles": false,
            "can_assign_roles": false,
            
            "can_create_projects": false,
            "can_delete_projects": false,
            "can_edit_projects": false,
            "can_publish_projects": false,
            "can_view_projects": false,

            "can_assign_members_to_projects": false
        }];
           
            newItem = '';
            console.log("ROLE LIST",roleList)
            console.log("PERMISSIONS LIST",roleListWithPermissions)
          
    } 

Answer 1

下面是一種方法，代碼中有解釋性注釋：

 // the original Object as described/shown in the question: let source = [{ name: "Partner", can_add_members: false, can_delete_members: false, can_edit_members: false, can_create_roles: false, }, { name: "Associate Partner", can_add_members: false, can_delete_members: false, can_edit_members: false, can_create_roles: false, } ], // here we use Array.prototype.map() to iterate over the Array of Objects: rolePermissions = source.map( // using destructuring assignment to retrieve the 'name' // property from the Array-element (the Object), // and assigning all remaining property-value pairs // to the 'rest' variable: ({ name, ...rest }) => { // here we return a new Object, with the computed value of the // 'name' variable to set the property equal to the value of the // variable rather than the String of 'name': return { // and the property-value equal to the Object containing the // rest of the key-value pairs: [name]: rest }; }), // converting the Array of Objects into a JSON string: jsonRolePermissions = JSON.stringify(rolePermissions); // logging that JSON string to the console: console.log(jsonRolePermissions);

參考：

• Array.prototype.map() 。
• 解構賦值。
• JSON.stringify() 。
• Object 初始值設定項。

Answer 2

您可以將 roleListWithPermissions 數組轉換為 object。

const finalResult =
  roleListWithPermissions.reduce((result, current) => {
    result[current.name]= {...current};
    delete result[current.name].name;
    return result;
   }, {})