Access the outer items of an object in a function of that object

Question

I've used Dock of PrimeReact.

<Dock model={options.buttons} position="right"/>

According to its document, For model we should pass its dockItems.

So I defined options like this:

I have an array of objects. Inside it I have buttons, I want to check if the xValue doesn't have value then I show an error message.

const options = [
        {
            xValue: '',
            uperMessage: 'Select a start date',
            lowerMessage: '',
            setMessage: function (time) {
                this.lowerMessage = `Selected start date: ${dateHelper.formatDate(time)}`;
            },
            buttons: [
                {
                    label: 'Next',
                    icon: () => <Button label="Next" className="p-button-success" />,
                    command: function () {
                        if (!this.xValue) {
                            toast.current.show({ severity: 'error', summary: 'Error', detail: 'Select a  start date!', life: 3000 });
                        } else {
                            setCurrentStep(2);
                        }

                    }
                },
                {
                    label: 'Cancel',
                    icon: () => <Button label="Cancel" className="p-button-secondary" />,
                    command: () => {
                        cancel()
                    }
                }
            ]
        },
        {
            xValue: '',
            uperMessage: 'Select a end date',
            lowerMessage: '',
            setMessage: function (time) {
                this.lowerMessage = `Selected end date: ${dateHelper.formatDate(time)}`;
            },
            buttons: [
                {
                    label: 'Next',
                    icon: () => <Button label="Next" className="p-button-success" />,
                    command: function (xValue) {
                        if (!this.xValue) {
                            toast.current.show({ severity: 'error', summary: 'Error', detail: 'Select a Divergence end date!', life: 3000 });
                        } else {
                            setCurrentStep(3);
                        }
                    }
                },
                {
                    label: 'Cancel',
                    icon: () => <Button label="Cancel" className="p-button-secondary" />,
                    command: () => {
                        cancel()
                    }
                }]
        }];

How can I access the xValue in the command function?

If I use this, it gets the items of the current scope. How can I access the items of the parent?

Any help would be greatly appreciated.

you need to send `xValue` as a parameter when executing `command` function — fullstack, Aug 03 '21 at 08:26
Could you please share this part of your code not as an image? — Majid M., Aug 03 '21 at 08:32
Could you change the signature of command method? Or you should just use it as the sample? — Majid M., Aug 03 '21 at 08:45
How do you mean? Could you provide me a sample for changing the signature of the command method? I think I should use it as the sample, but we can test the way you suggested. — Fateme Mirjalili, Aug 03 '21 at 08:52
@FatemeMirjalili I've posted an answer. Please check and try — Majid M., Aug 03 '21 at 08:55

Majid M. · Answer 1 · 2021-08-03T16:32:17.950

0

You can change command function and map on the options items, also buttons items. Finally you can find the current item and get the xValue :

command: function () {
         let $this = this;
         options.map((option,oindex)=>{
             option.buttons.map(button,binex)=>{
                 if(button == $this)
                    if (!option.xValue) {
                           toast.current.show({ severity: 'error', summary: 'Error', detail: 'Select a  start date!', life: 3000 });
                    } else {
                        setCurrentStep(2);
                    }
            })
        })

edited Aug 03 '21 at 16:32

answered Aug 03 '21 at 08:54

Majid M.

4,467
1
11
29

thank you but it doesn't work. when I log the `xValue` in the `command` method, it returns an object of the current scope, not the `xValue` – Fateme Mirjalili Aug 03 '21 at 09:04
I've updated my code, please try the updated one. – Majid M. Aug 03 '21 at 09:13
It doesn't work. It doesn't enter in the `if(button === $this)` – Fateme Mirjalili Aug 03 '21 at 09:47
@FatemeMirjalili If you could create a executable sample of code in the sandbox or something like that, I will solve that for you. – Majid M. Aug 03 '21 at 10:37
@FatemeMirjalili I've tried this code and it works. Please see this link: https://es6console.com/krwa3ms0/ – Majid M. Aug 03 '21 at 16:31

score -1 · Answer 2 · answered Aug 03 '21 at 08:51

-1

you could use the array name "options" to access xValue like that if(!options[item_index]['xValue']){ .... } for example:- options[0]["xValue"] => // return ''

answered Aug 03 '21 at 08:51

Aya Mostafa

34
5

Access the outer items of an object in a function of that object

2 Answers2