JavaScript / Vue - How can I empty the entire object properties value

Question

I have this Object:

 mappingData: {
    id_feed : "some data...",
    mapping_name: "some data...",
    xml_file_url: "some data...",
    encoding: "some data...",
    import_period: "some data...",
    token: "some data...",
    user_id: "some data...",
    projectFieldOptions: [
        { some object data },
        { some object dat }
    ],
    safety: {
        action_negative_diff: "some data...",
        action_positive_diff: "some data...",
        action_diff: "some data...",
        auto_update_title: "some data...",
        auto_update_description: "some data...",
        auto_update_images: "some data...",
        import_product_variations: "some data...",
    },
},

How can I empty this entire object properties value?

What I am trying is

for (const prop of Object.getOwnPropertyNames(this.mappingData)) {
    delete this.mappingData[prop];
}

Why not just this.mappingData = {} and let the garbage collector take care of it? — Ouroborus
– Ouroborus, Commented Jul 20, 2022 at 5:14
@Ouroborus: That is a different object; it may or may not fit the OP's use case. — Amadan
– Amadan, Commented Jul 20, 2022 at 5:18
OP, what is wrong with the snippet you posted at the end of your question? That should indeed delete all the own properties. What do you need to do that that snippet doesn't do for you? — Amadan
– Amadan, Commented Jul 20, 2022 at 5:18
@Ouroborus I got this error: Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'action_diff')" — Shibbir
– Shibbir, Commented Jul 20, 2022 at 5:18

Lakruwan Pathirage · Accepted Answer · 2022-07-20 05:34:44Z

0

In order to anwer this question I added some changes to this object.since this is not really javascript object.So assume this is your javascript object,

let mappingData = {
        id_feed: "some data...",
        mapping_name: "some data...",
        xml_file_url: "some data...",
        encoding: "some data...",
        import_period: "some data...",
        token: "some data...",
        user_id: "some data...",
        projectFieldOptions: [{ jj: "vfgfgfg" }, { kk: "vfgfgf" }],
        safety: {
          action_negative_diff: "some data...",
          action_positive_diff: "some data...",
          action_diff: "some data...",
          auto_update_title: "some data...",
          auto_update_description: "some data...",
          auto_update_images: "some data...",
          import_product_variations: "some data...",
        },
      };

And result as this,

{
    "id_feed": "",
    "mapping_name": "",
    "xml_file_url": "",
    "encoding": "",
    "import_period": "",
    "token": "",
    "user_id": "",
    "projectFieldOptions": "",
    "safety": ""
}

The answer is,

      let mappingData = {
        id_feed: "some data...",
        mapping_name: "some data...",
        xml_file_url: "some data...",
        encoding: "some data...",
        import_period: "some data...",
        token: "some data...",
        user_id: "some data...",
        projectFieldOptions: [{ jj: "vfgfgfg" }, { kk: "vfgfgf" }],
        safety: {
          action_negative_diff: "some data...",
          action_positive_diff: "some data...",
          action_diff: "some data...",
          auto_update_title: "some data...",
          auto_update_description: "some data...",
          auto_update_images: "some data...",
          import_product_variations: "some data...",
        },
      };
      
      
      
          for (const prop of Object.getOwnPropertyNames(mappingData)) {
        mappingData[prop] = "";
      }
      console.log(mappingData);

answered Jul 20, 2022 at 5:34

Lakruwan Pathirage

6554 silver badges15 bronze badges

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

4 Comments

Lakruwan Pathirage Over a year ago

@shibbir,If this your expected answer, accept this as answer

Shibbir Over a year ago

I got much more error: app.js:168113 [Vue warn]: Cannot set reactive property on undefined, null, or primitive value: ". Please check my full code: codeshare.io/78B0Jj

Lakruwan Pathirage Over a year ago

@Shibbir I don't know about the vue js, since you are asking about how to empty this entire object properties. So it is actually JavaScript question.so I have provided answer by emptying entire object respective to their properties. If you have another question, you can asked another question from the stack overflow.

Lakruwan Pathirage Over a year ago

@Shibbir welcome friend!

Sharful Islam · Accepted Answer · 2022-07-20 06:42:04Z

You can empty the nested object and array by making a recursive function.

Here is the input object:

let mappingData = {
    id_feed: "some data...",
    mapping_name: "some data...",
    xml_file_url: "some data...",
    encoding: "some data...",
    import_period: "some data...",
    token: "some data...",
    user_id: "some data...",
    projectFieldOptions: [{jj: "vfgfgfg"}, {kk: "vfgfgf"}],
    safety: {
        action_negative_diff: "some data...",
        action_positive_diff: "some data...",
        action_diff: "some data...",
        auto_update_title: "some data...",
        auto_update_description: "some data...",
        auto_update_images: "some data...",
        import_product_variations: "some data...",
    },
};

This function will return you the empty object

function emptyObjectValue(obj) {
    for (const prop of Object.getOwnPropertyNames(obj)) {
        if (obj[prop] instanceof Array) {
            obj[prop].forEach(o => {
                emptyObjectValue(o);
            })
        } else if (obj[prop] instanceof Object) {
            emptyObjectValue(obj[prop]);
        } else {
            console.log(obj[prop]);
            obj[prop] = null //or make it empty string like "";
        }

    }
    return obj;
}

console.log(emptyObjectValue(mappingData));

The output will be like this.

{
  id_feed: null,
  mapping_name: null,
  xml_file_url: null,
  encoding: null,
  import_period: null,
  token: null,
  user_id: null,
  projectFieldOptions: [ { jj: null }, { kk: null } ],
  safety: {
    action_negative_diff: null,
    action_positive_diff: null,
    action_diff: null,
    auto_update_title: null,
    auto_update_description: null,
    auto_update_images: null,
    import_product_variations: null
  }
}

Collectives™ on Stack Overflow

JavaScript / Vue - How can I empty the entire object properties value

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related