Many of you have used Element’s Cascader cascading selector component

Element3. Gitee. IO / # / useful – CN/com…

If you want to use this component, you need to specify an array of options for the Options property of the Cascader to render a cascading selector, according to the demo code provided.

The array structure for options must be like this:

Options: [{value: 'father label name corresponding values, label:' father label name 'children: [{value:' child tags of the corresponding values, label: 'child tag name' children: [{value: }]}]Copy the code

We can see that this data structure format is presented nested within each other.

If this data is dynamically retrieved from the back end, it is unlikely that the back end students will give us such a data structure. Recently when I used this component to develop business, the back end gave me a very flat set of data, something like this.

[{"id":"tagId",// tagId" parentId": "parentId",// optional, parent class id, null indicates the top-level node "name":"tagName"// tagName}]Copy the code

This is not consistent with the data structure shown in the cascade component, we need to extract a general method to transform.

First of all, the data structure attribute name given by my back end does not match the attribute name required by the options array, so I need to do a layer conversion first.

let result = await fetchData();

result = result.map(d => {
    return {
        value: d.id,
        label: d.name,
        parentId: d.parentId
    }
})
Copy the code

We then store the objects of the root node into one array and the objects of the children node into another array by checking if there is a parentId attribute.

function translateDataToTree (data) { let parents = data.filter(value => value.parentId === ''); Let children = data.filter(value => value.parentid! = = "); // Filter out all non-root nodes translator(parents, children); return parents; }Copy the code

After filtering, we defined a translator method that nested the two filtered arrays.

function translator (parents, children) { parents.forEach((parent) => { children.forEach((current, Index) => {// If the parent ID of the current child node matches the parent ID, Parse (json.stringify (children)); if (current. ParentId === parent. Value) {let temp = json.parse (json.stringify (children)); // Clone a subnode temp.splice(index, 1); // Discard the current child node translator([current], temp); // Start from the current child node, continue to search for its descendants, after the recursive completion of the stack, // after the stack, determine whether the parent node has children attribute, if there is a direct push, If (parent.children) {parent.children.push(current); } else { parent.children = [current]; }}}); }); }Copy the code

Now, let’s practice,

First define a flat set of fake data, the data structure of which is shown below

We then first call the map method of the array to convert it to the corresponding property name of the cascading component

Finally, we pass this set of data to data by calling the translateDataToTree method, and get the result:

This data format is now fully compliant with the data requirements for cascading components.

If you have a better idea, feel free to leave a comment below.