xhttp post doesn't work. Var is not defined

Question

I try to make a call to an API service, I can't make directly using js but I have to make a call from my server. So I make a xhttp request in this way:

var myKey = "xxxxxxxxxx";

var name = $('#Inputfield_pad_firstname').val();

var company = $('#Inputfield_company_name').val();
var street1 = $('#Inputfield_pad_address').val();
var street2 = "";
var city = $('#Inputfield_pad_city').val();
var state = "SV";
var zip = $('#Inputfield_pad_postcode').val();
var country = $('select[id=Inputfield_country_registration]').val().toUpperCase();
var phone = $('#Inputfield_pad_phone').val();
var email = $('#Inputfield_email').val();
var TotalValue = "10";
var length = "5";
var width = "5";
var height = "5";
var weight = "1";

var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4) {
        console.log( this.response );
        alert(this.response);
    } else{
        alert(this.response);
    }
};
xhttp.responseType = 'json';
xhttp.open("POST", 'https://www.xxxxxx.it/form/getRates.php', true);
xhttp.send(JSON.stringify({
            'Method' : 'GetRates',
            'Params' : {
            'apikey' : myKey,
            'to_address': {
                'name': name,
                'company': company,
                'street1': street1,
                'street2': street2,
                'city': city,
                'state': state,
                'zip': zip,
                'country': country,
                'phone': phone,
                'email': email
            },
            'from_address' : {
                'name': 'xxxxx',
                'company': 'xxxxx',
                'street1': 'xxxxx',
                'street2': '',
                'city': 'xxxxx',
                'state': 'IT',
                'zip': 'xxxxx',
                'country': 'IT',
                'phone': 'xxxxx',
                'email': 'marco@xxxxxx.it'
            },
            'parcels' : [
                {
                    'length': length,
                    'width': width,
                    'height': height,
                    'weight': weight
                }
            ],
            'Insurance': 0,
            'InsuranceCurrency': 'EUR',
            'CashOnDelivery': 0,
            'CashOnDeliveryCurrency': 'EUR',
            'ContentDescription': 'things',
            'TotalValue': TotalValue,
            'ShippingService': 'Standard'
        }
    })
);

If I try to make console.log for all variables tell me they are not defined. Except for name.

In the alert always returns me [object Object].

I can't understand where the error is. I think the error is inside the js file. Bu anyway this is my php file:

header('Access-Control-Allow-Origin: *');
$raw = file_get_contents('php://input');
$req = json_decode($raw);
if ( empty( $req->Params ) or empty( $req->Params->apikey ) ) die;
$connection = curl_init();
curl_setopt($connection, CURLOPT_URL, 'https://www.xxxx.com/api');
curl_setopt($connection, CURLOPT_SSL_VERIFYPEER, 0);
curl_setopt($connection, CURLOPT_SSL_VERIFYHOST, 0);
curl_setopt($connection, CURLOPT_HTTPHEADER, ["Content-Type: application/json"]);
curl_setopt($connection, CURLOPT_REFERER, $_SERVER["HTTP_REFERER"]);
curl_setopt($connection, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);
curl_setopt($connection, CURLOPT_USERPWD, $req->Params->apikey . ":");
curl_setopt($connection, CURLOPT_POST, 1);
curl_setopt($connection, CURLOPT_POSTFIELDS, json_encode($req) );
curl_setopt($connection, CURLOPT_RETURNTRANSFER, 1);
echo curl_exec($connection);
curl_close($connection);

All the .val() are corrects if I try to console.log these all exist.

All the Ready states in XMLHttpRequest are call but the request complete with [object Object].

What can I do to understand what is happening?

Thank you

@Quentin, I expect to read the response of the API. In this case I use to get a carrier quote. — Marco Romano, Jul 01 '19 at 13:31
Well, the response of the API is an object. So that's what you are doing. — Quentin, Jul 01 '19 at 13:31
How I can read the object data? I can't find the way. I look in the other link but I still can't read the data — Marco Romano, Jul 01 '19 at 13:34
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics — Quentin, Jul 01 '19 at 13:36
If i try to access in this way `this.response[0]` the result is: `undefined` If I try with `this.response['Rates'][0]['rate'] ` that is correct in php also `Cannot read property '0' of undefined` — Marco Romano, Jul 01 '19 at 13:43
You need to access the properties of the actual data structure you have — Quentin, Jul 01 '19 at 13:44
Ok I have a second problem now... "Authentication Failed"! Thank you @Quentin — Marco Romano, Jul 01 '19 at 13:54

xhttp post doesn't work. Var is not defined

0 Answers0