CODEWITHSUNDEEP
angularjswordpressionic-framework
GY22
GY22

Reputation: 785

POST request for WP API give me a 400 error (Bad request) - Ionic

Ok so I am working on a Ionic app with Wordpress as my backend. Together with the WP API plugin I was able to create a basic authentication (need to post to the Wordpress DB).

My last situation was this -> Basic authentication not working for WP API with Ionic/Angular

Now I am getting a 400 error (bad request) but when I run my endpoint in Postman with the key and values (content, title and excerpt), it gets saved to the WP DB.

enter image description here

The problem I am facing now is how to get it to working the app. So basically the view of the app is just a textarea where the user can submit a question.

For content, title and excerpt I set all the values to 1 scope.

Part of my HMTL code: 

<!-- <input type="text" placeholder="State your base" ng-model="question">
<input type="text" placeholder="excerpt" ng-model="question"> -->
<textarea class="customTextarea" name="question" id="" cols="30" rows="30" 
placeholder="Add Question Here" ng-model="question"></textarea>
<button ng-click="save()">Submit</button>

Part of my controller code:

.controller('AddQuestionCtrl', function($scope, $http, $base64){
        $scope.save = function(){
        console.log('SAVE');
        var url = 'XXXX/wp-json/wp/v2/posts';
        var username = 'xxxx';
        var psw = 'xxxx';

        $http.post(url, {content: $scope.question, title: $scope.question, excerpt: $scope.question},{
            headers:{
                'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8',
                'Authorization' : 'Basic ' + $base64.encode(username + ':' + psw),
                'Access-Control-Allow-Origin': '*' 
            }
        }).then(function(response){
            $scope.result = response;
            console.log('The data has been saved to DB', $scope.result);
        },
            function (error) {
            $scope.test = error;
            console.log('error response', $scope.test);         
        });
    }
})

Upvotes: 0

Views: 2735

Answers (2)

quirimmo
quirimmo

Reputation: 9988

With AngularJS you can do in an easier way.

You can inject $httpParamSerializer and then prepare your data through $httpParamSerializer(data).

So your call should look something like: 

$http({
    url: 'YOUR-WP-API-GOES-HERE',
    method: "POST",
    data: $httpParamSerializer(myobject),
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})

Upvotes: 1

Paresh Gami
Paresh Gami

Reputation: 4782

First convert data to object then pass to http.post. it is working

myobject = {'content': $scope.question, 'title': $scope.question, 'excerpt': $scope.question};

Object.toparams = function ObjecttoParams(obj)
{
    var p =[];
    for (var key in obj)
    {
        p.push(key + '=' + encodeURIComponent(obj[key]));
    }
    return p.join('&');
};

$http({
    url: 'YOUR-WP-API-GOES-HERE',
    method: "POST",
    data: Object.toparams(myobject),
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
.success(function (data, status, headers, config) 
{

})
.error(function (data, status, headers, config) 
{

});

Upvotes: 2

Related Questions