Utilizing the `map` function for converting a `forEach`

Question

Utilizing the `map` function for converting a `forEach`

I'm currently in the process of refactoring my code to use the map function instead of forEach. However, I am facing an issue with implementing a null check for order.FunctionStatusList while using map. Specifically, I need guidance on how to handle the else statement when dealing with orderAction.OrderList.

Below is the original code using forEach:

        this.orders.forEach((order: Order) => {
            let orderAction: OrderAction = new OrderAction();
            orderAction.FunctionTypeCode = this.functionTypeCode;
            orderAction.SelectedAction = this.actionSelected;
            if (order.FunctionStatusList != null) {
                order.FunctionStatusList.forEach(orderFunctionStatus: OrderFunctionStatus  => {
                    orderAction.OrderList = [{
                        OrderId: order.OrderId,
                        AvailableActions: orderFunctionStatus.AvailableActions,
                        IsAvailableActions: orderFunctionStatus.AvailableActions.length > 0,
                        ValidationMessage: OrderFunctionStatus.ValidationMessage
                    }];
                });
            }
            else {
                orderAction.OrderList = [{
                    OrderId: order.OrderId,
                    AvailableActions: [],
                    IsAvailableAction: false,
                    ValidationMessage: ''
                }];
            }
            this.orderActionList.push(orderAction);
        });

And here is the updated code utilizing map:

            this.orderActionList = this.orders.map(order => ({
            FunctionTypeCode: this.functionTypeCode,
            SelectedAction: this.actionSelected,
            OrderList: order.FunctionStatusList ? order.FunctionStatusList.map((orderFunctionStatus: OrderFunctionStatus) => ({
                OrderId: order.OrderId,
                AvailableActions: orderFunctionStatus.AvailableActions,
                IsAvailableAction: orderFunctionStatus.AvailableActions.length > 0,
                ValidationMessage: orderFunctionStatus.ValidationMessage
            })):[]
        })

|EDIT| Additionally, see below the json format for the order:

{
    "OrderId": "1",
    "FunctionStatusList": [{
        "FunctionTypeCode": "1",
        "AvailableActions": [{
            "ActionLabel": "1",
            "ActionValue": "1"
        }]
    }]
 }

Lastly, here is the expected JSON structure for order-action:

    {
"FunctionTypeCode": "1",
"SelectedAction: "1",
"OrderList": [{
   "OrderId": "1",
   "IsAvailableActionsLoaded": "1",
   "AvailableActions": [{
      "ActionLabel": "1",
      "ActionValue": "1"
   }]
}]

}

angular typescript rxjs

Answer 1

Answer №1

Indeed, you were on the right track and all that was required was to incorporate the else clause into your code, specifying the properties following the colon.

You managed to solve it in a very graceful manner. Using the ternary operator allowed for creating an inline if... else statement with the conditions you needed.

As I worked on the code in pure JS, I omitted the .this and type assertions, so please excuse those absences.

I have introduced a new property called ValidationMessage to the provided code sample. Additionally, by using a ternary operator, you can easily check if it holds a truthy value. If not, you can simply add ''.

Just to note, I assumed that you are retrieving the values of functionTypeCode and actionSelected from external sources, which is why I defined them as constants within the function.

const orderActionFormatter = (input) => {
    const functionTypeCode = 1;
    const actionSelected = 1;
    return input.map(order => {
        return ({
            FunctionTypeCode: functionTypeCode,
            SelectedAction: actionSelected,
            OrderList: order.FunctionStatusList != null ? order.FunctionStatusList.map(orderFunctionStatus => {
                return ({
                    OrderId: order.OrderId,
                    AvailableActions: orderFunctionStatus.AvailableActions,
                    IsAvailableAction: orderFunctionStatus.AvailableActions.length > 0,
                    ValidationMessage: !!orderFunctionStatus.ValidationMessage ? orderFunctionStatus.ValidationMessage : ''
                })
            }) : {
                OrderId: order.OrderId,
                AvailableActions: [],
                IsAvailableAction: false,
                ValidationMessage: ''
            }
        })
    })
}

const input = [{"OrderId":"1","FunctionStatusList":[{"FunctionTypeCode":"1","AvailableActions":[{"ActionLabel":"1","ActionValue":"1"}],"ValidationMessage":"foo bar"}]}];
const inputNullFunctionStatusList = [{"OrderId":"1","FunctionStatusList":null}]

 console.log(orderActionFormatter(input))
 console.log(orderActionFormatter(inputNullFunctionStatusList))

Answer 2

Indeed, you were on the right track and all that was required was to incorporate the else clause into your code, specifying the properties following the colon.

You managed to solve it in a very graceful manner. Using the ternary operator allowed for creating an inline if... else statement with the conditions you needed.

As I worked on the code in pure JS, I omitted the .this and type assertions, so please excuse those absences.

I have introduced a new property called ValidationMessage to the provided code sample. Additionally, by using a ternary operator, you can easily check if it holds a truthy value. If not, you can simply add ''.

Just to note, I assumed that you are retrieving the values of functionTypeCode and actionSelected from external sources, which is why I defined them as constants within the function.

const orderActionFormatter = (input) => {
    const functionTypeCode = 1;
    const actionSelected = 1;
    return input.map(order => {
        return ({
            FunctionTypeCode: functionTypeCode,
            SelectedAction: actionSelected,
            OrderList: order.FunctionStatusList != null ? order.FunctionStatusList.map(orderFunctionStatus => {
                return ({
                    OrderId: order.OrderId,
                    AvailableActions: orderFunctionStatus.AvailableActions,
                    IsAvailableAction: orderFunctionStatus.AvailableActions.length > 0,
                    ValidationMessage: !!orderFunctionStatus.ValidationMessage ? orderFunctionStatus.ValidationMessage : ''
                })
            }) : {
                OrderId: order.OrderId,
                AvailableActions: [],
                IsAvailableAction: false,
                ValidationMessage: ''
            }
        })
    })
}

const input = [{"OrderId":"1","FunctionStatusList":[{"FunctionTypeCode":"1","AvailableActions":[{"ActionLabel":"1","ActionValue":"1"}],"ValidationMessage":"foo bar"}]}];
const inputNullFunctionStatusList = [{"OrderId":"1","FunctionStatusList":null}]

 console.log(orderActionFormatter(input))
 console.log(orderActionFormatter(inputNullFunctionStatusList))

Utilizing the `map` function for converting a `forEach`

Answer №1

Similar questions

Error: The System variable is not defined in the current context - Angular 2

The function signature '() => void' cannot be assigned to a variable of type 'string'

Trouble viewing Three.js content in Index.html

Is it possible to specify the version of a dependency using Stackblitz?

Utilize the TypeScript Compiler API to extract the Type Alias Declaration Node from a Type Reference Node

There is no correlationId found within the realm of node.js

The element access has been upgraded to utilize ng-content

Diverse Selection of Font Awesome Icons

The content displayed in the PrimeNG p-table is limited to only the table name with no additional information

What are the benefits of incorporating NgRx in Angular, even when data is consistently synchronized through two-way data binding?

Error encountered numerous times within computed signals (angular)

Element not recognized: <my-company-form-extra> - have you properly registered this component?

Why is the Last Page display on pagination showing as 3 instead of 2 per items?

Testing an action within an interval in Angular using Jasmine

Postman issue: Your username and password combination is incorrect within the MEAN stack environment

When attempting to activate the same route, the Angular 8 router fails to trigger any events when utilizing `onSameUrlNavigation: 'reload'`

The useRef function is malfunctioning and throwing an error: TypeError - attempting to access 'filed2.current.focus' when 'filed2' is null

Displaying multiple lines of text in a MatSnackbar in Angular is possible

Is it possible to subscribe multiple times in Angular without triggering multiple requests?

"String representation" compared to the method toString()