firestore is rejecting post request from angularjs

All we need is an easy explanation of the problem, so here it is.

i’m trying to add a new document to the collection Offers by using $http.post method in angularjs.

i’m getting this error in the console:

Possibly unhandled rejection: {
    "data": {
        "error": {
            "code": 400,
            "message": "Invalid JSON payload received. Unexpected token.\nfields%5BcompanyName\n^",
            "status": "INVALID_ARGUMENT"
        }
    },
    "status": 400,
    "config": {
        "method": "POST",
        "transformRequest": [null],
        "transformResponse": [null],
        "jsonpCallbackParam": "callback",
        "url": "https://firestore.googleapis.com/v1beta1/projects/syrian-sales-v2/databases/(default)/documents/Offers",
        "data": "fields%5BcompanyName%5D=qwe&fields%5Bdescription%5D=qwe&fields%5BexpiredDate%5D=qwe&fields%5Btitle%5D=qwe&fields%5BuserId%5D=rsVWKar7UTMwUmcyYJbr6Rif4NN2",
        "headers": {
            "Content-Type": "application/json; charset=UTF-8;",
            "Accept": "application/json, text/plain, /"
        }
    },
    "statusText": "",
    "xhrStatus": "complete"
}

i have tried so many solutions but none worked.

here’s the controller code:

app.controller('insert_controller', function ($scope, $http, $httpParamSerializerJQLike) {

    let userId = "rsVWKar7UTMwUmcyYJbr6Rif4NN2";
    let url = "https://firestore.googleapis.com/v1beta1/projects/syrian-sales-v2/databases/(default)/documents/Offers";

    $scope.insertOffer = function () {
        let companyName = $scope.companyName;
        let title = $scope.title;
        let expiredDate = $scope.expiredDate;
        let description = $scope.description;
        let data = {
            "fields": {
                "companyName": companyName,
                "title": title,
                "expiredDate": expiredDate,
                "description": description,
                "userId": userId,
            }
        };

        $http({
            method: 'POST',
            url: url,
            data: $httpParamSerializerJQLike(data),
            headers: {
                'Content-Type': 'application/json; charset=UTF-8;'
            }
        }).then(function (res) {
            if (res.data){
                $scope.companyName = null;
                $scope.title = null;
                $scope.expiredDate = null;
                $scope.description = null;
                alert('Offer Added Successfully')
            }
        }).catch(function (err) {
            console.log(err);
            throw err
        });
    }
});

any help would be great, thanks in advance

EDIT: i tried sending a post request from postman and it worked to the same url and the same json data structure i’m using

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

the problem was that I was using a wrong schema.

This is the old schema:

let data = {
    "fields": {
        "companyName": companyName,
        "title": title,
        "expiredDate": expiredDate,
        "description": description,
        "userId": userId,
    }
};

This is the correct schema which worked:

let data = {
        "fields": {
            "companyName": {
                "stringValue": companyName
            },
            "title": {
                "stringValue": title
            },
            "expiredDate": {
                "stringValue": expiredDate
            },
            "description": {
                "stringValue": description
            },
            "userId": {
                "stringValue": userId
            },
        }
    };

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply