How to get JSON object values filtered by a string?-CodePudding

I have a simple json array that contains roles and its permissions:

var permission_list =
    {
        "admin": [
            "grant-all-access"
        ], 
        "operation": [
            "wms-operation-read",
            "wms-operation-write"
        ],
        "logistics": [
            "wms-storage-read",
            "wms-storage-write"
        ],
        "cx": [
            "wms-storage-read",
            "wms-storage-write"
        ],
        "normal_user": [
            "page-read",
            "page-write"
        ]
    };

And I need to dynamically get each permission per role. Roles are being thrown from the backend but it is in string and I need to loop through the permission list by role.

Let's say I need to get only the "operation" permissions to add to a div element.

wms-operation-read
wms-operation-write

Here's what I tried:

var role = "admin" // sample string thrown from ajax api from BE

$.each(permission_list, function (key, val) {
  console.log(key)
}); // returns the first level array

My idea was to loop through permission_list.role but don't know how to make it work.

I hope you guys can help me :)

CodePudding user response：

If you know at runtime exactly what property of the permission_list object you need to get the roles for, operation in the example in your question, then you can access it directly and use a loop to get the values, eg.

var permission_list = {admin:["grant-all-access"],operation:["wms-operation-read","wms-operation-write"],logistics:["wms-storage-read","wms-storage-write"],cx:["wms-storage-read","wms-storage-write"],normal_user:["page-read","page-write"]};

permission_list.operation.forEach(role => {
  console.log(role);
});

Taking this a step further, to add those role names to a div in the UI you can use map() to create an array of HTML strings which you append() where necessary:

var permission_list = {admin:["grant-all-access"],operation:["wms-operation-read","wms-operation-write"],logistics:["wms-storage-read","wms-storage-write"],cx:["wms-storage-read","wms-storage-write"],normal_user:["page-read","page-write"]};

let html = permission_list.operation.map(role => `<div >${role}</div>`);
$('#roles').append(html);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h4>Operation:</h4>
<div id="roles"></div>

CodePudding user response：

As you have access to key and value on each item in the permission_list object you can perform what ever you want within the callback which you pass as the second argument to $.each method like bellow

var permission_list = {
    "admin": [
        "grant-all-access"
    ], 
    "operation": [
        "wms-operation-read",
        "wms-operation-write"
    ],
    "logistics": [
        "wms-storage-read",
        "wms-storage-write"
    ],
    "cx": [
        "wms-storage-read",
        "wms-storage-write"
    ],
    "normal_user": [
        "page-read",
        "page-write"
    ]
};

let container = document.querySelector("#root");

$.each(permission_list, function(key, value) {
    // key contains the object key
    // value contains the value at the given key in the permission_list object
    let template = [];
    container.insertAdjacentHTML('beforeend', `<h2>${key}</h2>`);
    value.forEach(item => {
        template.push(`<p>${item}</p>`);
    });
    container.insertAdjacentHTML('beforeend', template.join(''));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="root">
</div>