Initialise empty array in an object in JavaScript

Question

lets say i have

        var form = {
            header: {
                value: null,
                isValid: false,
                type: 'textinput',
                rules: {
                    isRequired: true,
                },
            },
           selectedImages: []
        }

at some point, user will push some images into this form.selectedImages i am doing it in this way:form.selectedImages.push(image) BUT because my selectedImages is null, push is not working here. so, how can i initilise an empty array btw, i have tried selectedImages: new Array() but not worked too.

Is there anyway i can fix this issue?

thanks.

UPDATE

after i initialized this form. i am using setState({form: form}) to set this form to the state. after set is done, form.selectedImages: null, console.log(form) says..

UPDATE 2 here is the full react code:

 var form = {
            header: {
                value: null,
                isValid: false,
                type: 'textinput',
                rules: {
                    isRequired: true,
                },
            },
            description: {
                value: null,
                isValid: false,
                type: 'textinput',
                rules: {
                    isRequired: true,
                },
            },
            provinence: {
                value: null,
                isValid: false,
                type: 'dropdowninput',
                rules: {
                    isRequired: true,
                },
            },
            district: {
                value: null,
                isValid: false,
                type: 'dropdowninput',
                rules: {
                    isRequired: true,
                },
            },
            quarter: {
                value: null,
                isValid: false,
                type: 'dropdowninput',
                rules: {
                    isRequired: true,
                },
            },
            address: {
                value: null,
                isValid: false,
                type: 'textinput',
                rules: {
                    isRequired: true,
                },
            },
            where: {
                value: null,
                isValid: false,
                type: 'dropdowninput',
                rules: {
                    isRequired: true,
                },
            },
            to: {
                value: null,
                isValid: false,
                type: 'dropdowninput',
                rules: {
                    isRequired: true,
                },
            },
            deliverTo: {
                value: null,
                isValid: false,
                type: 'dropdowninput',
                rules: {
                    isRequired: true,
                },
            },
            selectedImages: [],
            whatsappContact: false,
            emailContact: false,
            isFree: false
        }

this is how i use this form i a switch case. i have n category, and they all have different kind of input information. so created a function, called initializeFormState() where basically i get related category info from state and making nullable objects which i don't need based on selected category. at the end,i set this form inputs to the state in order to validate and push them to the server.

this is one of my cases:

            case 0: //emlak
                form.where = null;
                form.to = null;
                form.address = null;
                deliverTo = null;
                this.setState({ ...form, selectedImages: [] }, () =>{console.log(form)});

selectedImages isn't null, it's an empty array []. What is the actual error message you're getting when you try to push to it? — JoshG
– JoshG, Commented Oct 22, 2019 at 9:24
and how is this selectedImages: [] wrong? it initializes an empty array normally, it's not null — Krzysztof Krzeszewski
– Krzysztof Krzeszewski, Commented Oct 22, 2019 at 9:24
you already initialized it with an empty array like this: selectedImages: [] what is the problem? — SuleymanSah
– SuleymanSah, Commented Oct 22, 2019 at 9:25

score 3 · Accepted Answer · 2019-10-22 09:42:20Z

3

In JavaScript, You can directly initialize object or array via passing empty records like {} or [].

Your code is right, you don't need to do anything now. just try to push images in the selectedImages.

form.selectedImages.push(image)

It will work.

UPDATE
In order to make it working, You have to set state via below command.

if(!Array.isArray(form.selectedImages)) form.selectedImages = [];
this.setState({form: form});

edited Oct 22, 2019 at 9:42

answered Oct 22, 2019 at 9:28

user11910739

Sign up to request clarification or add additional context in comments.

2 Comments

AlkanV Over a year ago

Hello again, i have tried what you have suggested. the thing is, before setState and after setState, form.selectedImages = null.

user11910739 Over a year ago

I guess the problem with this line this.setState({ ...form, selectedImages: [] }, () =>{console.log(form)});. It should be this.setState({ ...form, selectedImages: [] }, () =>{console.log(this.state)});.

Sven van de Scheur · Accepted Answer · 2019-10-22 09:30:25Z

1

[], like you did, will initialize an empty array. Array.push is available on form.selectedImages. If you run into issue, it's probably something else.

An empty array ([]) is not null, and is actually truthy (Boolean([]) equals true).

        var form = {
            header: {
                value: null,
                isValid: false,
                type: 'textinput',
                rules: {
                    isRequired: true,
                },
            },
           selectedImages: []
        }
        
document.write(form.selectedImages);
form.selectedImages.push('foo')
document.write(form.selectedImages);

answered Oct 22, 2019 at 9:30

Sven van de Scheur

1,9132 gold badges17 silver badges31 bronze badges

Comments

N. Henoc HOUNSA · Accepted Answer · 2019-10-22 09:39:10Z

0

if you have initialized like this : form.selectedImages = [] you can not have the error that it's null when you try the push method

Now if you want to make sure that the table is not empty when you want to push use this:

form.selectedImages = [...image]

answered Oct 22, 2019 at 9:39

N. Henoc HOUNSA

1691 silver badge9 bronze badges

Collectives™ on Stack Overflow

Initialise empty array in an object in JavaScript

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related