i have 2 .maps and returns updated value.
ive done a lot of research about multiple .map promises but i just couldn't get it.

export async function ToBE(workspace: any) {
    let components: any = []

    components = await loopThroughMaincomponents(workspace, components)
    components = await loopThroughMaincomponents_Then_Components(workspace, components)

    return {
        id: workspace.id,
        body: components,
        name: workspace.workspace_name,
        description: `${workspace.workspace_name} Application`,
        created_by: "Master",
    };
}

This is the main problem.
the components return is:

(3) [Array(3), Array(3), Array(3)]  
0: (3) [Promise, Promise, Promise]  
1: (3) [Promise, Promise, Promise]  
2: (3) [Promise, Promise, Promise]  
length: 3  
[[Prototype]]: Array(0)  

Reference for the functions:

const loopThroughMaincomponents = async (workspace: any, components: any) => {
    return workspace.components.map(async (workspace_body: any, key: number) => {
        if (workspace_body.type === "template" || workspace_body.type === "main") {

            let sub_component_ids: any = []
            const template_id = key   1

            components.push({
                "id": template_id, // Template ID
                "templateId": workspace_body.id,
                "type": "main",
                "label": workspace_body.data.name,
                "name": workspace_body.data.name,
                "description": "----",
                "image_uri": "---",
                "properties": workspace_body.data
            })

            const subcomponents = await loopThroughSubcomponents(workspace_body.data.subcomponents, components, template_id, sub_component_ids)
            components = await updateSubComponentIds(subcomponents.components, subcomponents.sub_component_ids, template_id)
        }
        return components
    })
}

const loopThroughMaincomponents_Then_Components = async (workspace: any, components: any) => {
    return workspace.components.map((workspace_body: any) => {
        if (workspace_body.type === "bidirectional") {
            console.log("components", components)
            console.log("workspace_body", workspace_body)

            // It will update components
            return components.map((node: any) => {
                if (node.id === workspace_body.source) {

                    let newcon = {
                        id: workspace_body.id,
                        type: workspace_body.type,
                        source: workspace_body.source,
                        target: workspace_body.target,
                        sourceHandle: workspace_body.sourceHandle,
                        targetHandle: workspace_body.targetHandle,
                        arrowHeadType: workspace_body.arrowHeadType
                    }

                    let mix = {
                        ...node.properties.connection,
                        ...newcon
                    }
                    console.log("mix", mix)
                    mix = {
                        ...node.properties,
                        properties: mix
                    }
                    return {
                        ...node,
                        ...mix
                    }
                }
                return node
            })

        }
        return components
    })

researched:
Async function returning promise, instead of value
Async/Await not waiting for response, and returns Promise object
Async/Await not waiting
Writing multiple map functions in Promise.all()

CodePudding user response：