Remove null and empty object properties in Vue.js

Question

I am sending object data to some API. I have many states and not every one is required every time, so I want to remove any properties from the object that are null or an empty string. How can I do this?

export default {
  methods: {
    sendData() {
      axios
        .post("api", this.$store.state.data)
        .then((response) => console.log(response))
        .catch((error) => console.log(error));
      console.log(this.$store.state.data);
    },
  },
  mounted() {
    this.sendData();
  },
};

Here, where I have store state data, I need to send only the filled values and not everything with empty values too.

Darryl Noakes · Accepted Answer · 2023-09-11 21:52:54Z

2

You can use the .reduce() method on the object's keys to create an object with only the non-empty fields:

let filledData = Object.keys(this.$store.state.data).reduce((acc, curr) => {
  if (data[curr]) {
    acc[curr] = data[curr];
  }
  return acc;
}, {});

axios.post("api", filledData);

edited Sep 11, 2023 at 21:52

Darryl Noakes

2,8301 gold badge14 silver badges31 bronze badges

answered Jun 20, 2022 at 10:19

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

Comments

Shinwi · Accepted Answer · 2023-09-11 11:39:10Z

0

You can remove null or undefined data from an object by looping through its keys and checking whether their values are null/undefined, and deleting them if so.

Object.keys(yourObj).forEach(k => [undefined, null].includes(yourObj[k]) && delete yourObj[k] )

If there more values you would like to check for, you can add them in the array that's withing the forEach loop.

You can then pass this new object to the body of your POST request.

answered Sep 11, 2023 at 11:39

Shinwi

1391 silver badge9 bronze badges

1 Comment

Darryl Noakes Over a year ago

This will update the original object, which is usually undesirable. In the case of the something like a state store, it will break it.

Collectives™ on Stack Overflow

Remove null and empty object properties in Vue.js

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related