How to set all object properties to null in JavaScript?

Question

I am using Vue and suddenly some of the computed css using vuetify is not working.

The way I declare an object is

personal_info : {}

and in my template, I could just do personal_info.name and other more in every v-model of text input.

I have no errors but suddenly the vuetify has a class called input-group--dirty that will elevate the label of the text input whenever it's not empty. But suddenly, it's not working. It looks like this:

As you can see, the text and label are overlapping.
The only thing that make it work is to set the property to null which is:

personal_info : {
  name: null
}

The problem is that I have hundreds of text inputs and I dont want to set everything to null.

Is there a simple way to set all of the object's properties to null instead of coding it 1 by 1?

Solution 1

checkout this snippet

var personal_info = {
  name: 'john',
  email: '[email protected]',
  phone: [phone]
}
console.log(JSON.stringify(personal_info)); //before looping

for (var key in personal_info ) {
  personal_info[key] = null;
}

console.log(JSON.stringify(personal_info));//after looping and setting value to 'null'

Solution 2

Vilas example is ok. But in case you have nested properties and your obj looks like this you could try my snippet

var obj = {
  a: 1 ,
  b: 2,
  c: {
    e:3,
    b: {
      d:6,
      e: ['23']
    }
  }
};

var setProps = function(flat, newVal){
   for(var i in flat){
     if((typeof flat[i] === "object") && !(flat[i] instanceof Array)){
       setProps(flat[i], newVal);
       return;
     } else {
       flat[i] = newVal;
     }
  }
}
setProps(obj, null);

console.log(JSON.stringify(obj));

Comments

[wobsoriano]

Combining that with my code it won't work because we know javascript is synchronous

[Vilas Kumkar]

@FewFlyBy what problem you are facing now? how this object is generated? are you using any/more api calls to generate it?

[wobsoriano]

I'm not using any api etc.. I still get the same thing

[Vilas Kumkar]

Okay, Would you mind to share what kinf of data is stored in personal_info? OR You can create a fiddle and paste link

[wobsoriano]

You interested if I put the project in github? Just npm install and npm run dev it after..

[Vilas Kumkar]

No problem, let's give a try

[wobsoriano]

This one github.com/sorxrob/vue-test just npm install and npm run dev and navigate the browser to localhost:8080/#/employees/add-employee

[Vilas Kumkar]

Let us continue this discussion in chat.