Posting an Empty Array to an API if JSON object is empty

Question

I am trying to post a JSON object to an API with 2 fields. However if these fields are empty (i.e. no values were inputted on the form) I want to send an empty array.

The section of the form allows for 2 ticketing options: paid and free, if free is selected no values will be inputted into these 2 fields.

This is what the pricing and ticketing option looks like in my state:

ticketing: ""       // this would be either 0 or 1
pricing: [
              {
                price: "",
                currency: "",
              }
            ],

And this is how I send it to my API:

const info = {
  ticketing: this.state.ticketing,
  price: [
              {
                currency: this.state.currency,
                price: this.state.price,
              }
            ],
  }

axios
     .post(`https://www.somewhere.com`, {
       info
     })

When no values are inputted for price and currency the form posts:

price: [{}]
  0: {}

I would like it to post:

price: []

instead, please let me know how I can do this.

I have updated my answer to show that the API receives the the data in single constant.

Thanks for any help!

Possible duplicate of [How do I test for an empty JavaScript object?](https://stackoverflow.com/questions/679915/how-do-i-test-for-an-empty-javascript-object) — MauriceNino, Aug 20 '19 at 09:56
Because of the object you pass into the array, when the strings are empty, you wind up with an empty object inside the array. You could simply add logic which adds the object if the strings are present, and only adds an empty array if they are not. — Will Alexander, Aug 20 '19 at 09:58
I would go for `let pricing = ...` istead of `const` and then do `pricing.price = pricing.price.filter(p => Object.entries(p).length !== 0)` before the `post` — MauriceNino, Aug 20 '19 at 09:58
@WillAlexander I have updated my answer to show that the API receives the the data in single constant. — Jason, Aug 20 '19 at 10:10

score 0 · Answer 1 · answered Aug 20 '19 at 10:04

0

You may filter out empty objects from price array using filter(). Here is a sample:

prices = {
    price: [
        {
            currency: "USD",
            price: 5.0,
        }, {}
    ].filter(token => Object.keys(token).length != 0)
}
console.log(prices);

answered Aug 20 '19 at 10:04

fiveelements

3,649
1
17
16

I have updated my answer to show that the API receives the the data in single constant. – Jason Aug 20 '19 at 10:10
I'm not seeing any difference after adding this. It still posts an empty object in the array, thank you for the response though – Jason Aug 20 '19 at 10:18
I have shown how to remove/filter empty objects from an array. This is needed to be added in your code where all you have an array with the possibility of having empty objects in it. Your code samples are incomplete and hence I can't point out exactly where all you have to apply this. The direction would be: form the array, apply filter, add to request structure and send to backend API. – fiveelements Aug 20 '19 at 10:23

score 0 · Answer 2 · answered Aug 20 '19 at 13:38

If you want this filter to only work when currency and price, you can remove any element not having both by using the filter method :

axios.post(`https://www.somewhere.com`, {
  info: info.filter(inf => inf.currency && inf.price)
})

If you want your info to work with any kind of object by keeping object that have any of their values defined, you can use the some method on their values :

axios.post(`https://www.somewhere.com`, {
  info: info.filter(inf => Object.values(inf).some(i => i))
})

score -1 · Answer 3 · answered Aug 20 '19 at 10:00

-1

const {currency, price} = this.state;
const pricing = {price: []}
if(currency && price) pricing.price.push({currency, price})

axios.post(`https://www.somewhere.com`, { pricing })

answered Aug 20 '19 at 10:00

Mohammed Ashfaq

3,353
2
15
22

Posting an Empty Array to an API if JSON object is empty

3 Answers3