Javascript fetch method failing

Question

So I am trying to call an api using the javascript fetch method. But it keeps failing.

I am trying to call this api this way:

const addressReq = await fetch(`https://vapi.verifyme.ng/v1/verifications/addresses`, {
                    headers:{
                        'Authorization':`Bearer ${AllKeys.verifyNINKey}`,
                        'Content-Type': 'application/json'
                    },
                    method:'POST',
                    body:{
                        'reference':`${id}`,
                        'city':`${city}`,
                        'state':`${state}`,
                        'landmark':`${city} ${estate && estate + ' estate'}`,
                        'lga': `${lga}`,
                        'street':`${street_number} ${street_name} ${estate} ${city}`,
                        "applicant.firstname" : `${displayName}`,
                        "applicant.lastname" : `${lastName}`,
                        "applicant.dob" : `${rows.birth_info}`,
                        "applicant.phone" : `${number}`,
                        "applicant.idType" : 'KYC',
                        "applicant.idNumber" : `${number}`,
                        // "applicant.firstname" : `${displayName}`,
                        // "applicant": {
                        //     'firstname':`${displayName}`,
                        //     'lastname':`${lastName}`,
                        //     'dob':`${rows.birth_info}`,
                        //     'phone':`${number}`,
                        //     'idType':'KYC',
                        //     'idNumber':`${number}`,
                        // }
                    }
                }).then(async(res) => {
                    console.log(await res.json())
                    dispatch({ type:'UPDATE_STATUS',payload: {status:'guarantor'} })
                }).catch(err => console.log(err))

But it doesn't work. I keep getting a 400 error

Object {
  "error": "Bad Request",
  "message": Array [
    "applicant should not be null or undefined",
    "state should not be empty",
    "state must be a string",
    "street should not be empty",
    "street must be a string",
    "lga should not be empty",
    "lga must be a string",
  ],
  "statusCode": 400,
}

But when I use postman it works.

I have also added a webhook on pipedream and I do not receive that either to prove it doesn't work.

I have tried everything possible but no positive feedback. Is there any thing I'm doing wrong?

Answer 1

Thanks to @Barmar all I needed to do was add JSON.stringify()

Outcome:

const addressReq = fetch(`https://vapi.verifyme.ng/v1/verifications/addresses`, {
                    headers:{
                        'Authorization':`Bearer ${AllKeys.verifyNINKey}`,
                        'Content-Type': 'application/json'
                    },
                    method:'POST',
                    body:JSON.stringify({
                        'reference':`${id}`,
                        'city':`${city}`,
                        'state':`${state}`,
                        'landmark':`${city} ${estate && estate + ' estate'}`,
                        'lga': `${lga}`,
                        'street':`${street_number} ${street_name} ${estate} ${city}`,
                        "applicant.firstname" : `${displayName}`,
                        "applicant.lastname" : `${lastName}`,
                        "applicant.dob" : `${rows.birth_info}`,
                        "applicant.phone" : `${number}`,
                        "applicant.idType" : 'KYC',
                        "applicant.idNumber" : `${number}`,
                        // "applicant.firstname" : `${displayName}`,
                        // "applicant": {
                        //     'firstname':`${displayName}`,
                        //     'lastname':`${lastName}`,
                        //     'dob':`${rows.birth_info}`,
                        //     'phone':`${number}`,
                        //     'idType':'KYC',
                        //     'idNumber':`${number}`,
                        // }
                    })
                }).then((res) => {
                    console.log(res.json())
                    dispatch({ type:'UPDATE_STATUS',payload: {status:'guarantor'} })
                }).catch(err => console.log(err))