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

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

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