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, Jul 20 '22 at 05:14
@Ouroborus: That is a different object; it may or may not fit the OP's use case. — Amadan, Jul 20 '22 at 05: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, Jul 20 '22 at 05:18
@Ouroborus I got this error: `Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'action_diff')"` — Shibbir, Jul 20 '22 at 05:18
Does this answer your question? [Removing all properties from a object](https://stackoverflow.com/questions/19316857/removing-all-properties-from-a-object) — Ouroborus, Jul 20 '22 at 05:19
The accepted answer on that covers both cases: Just replacing the object, or actually removing all the keys from the object. — Ouroborus, Jul 20 '22 at 05:19
As for the issue you're having, you'll have to provide more details about the code in your question in order to resolve that. For example, what is the code after you changed it? — Ouroborus, Jul 20 '22 at 05:20
I guess this would answer your question - [quickly clear an object](https://stackoverflow.com/questions/684575/how-to-quickly-clear-a-javascript-object) — Shreeraj, Jul 20 '22 at 05:22

score 0 · Answer 1 · answered Jul 20 '22 at 05:34

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);

@shibbir,If this your expected answer, accept this as answer — Lakruwan Pathirage, Jul 20 '22 at 05:37
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: https://codeshare.io/78B0Jj — Shibbir, Jul 20 '22 at 05:42
@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, Jul 20 '22 at 05:47

score -1 · Answer 2 · answered Jul 20 '22 at 06:42

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
  }
}

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

2 Answers2