0

I have created an API in Django where you type a variable in the URL and it makes a JSON response.

For example, we have this URL:

http://127.0.0.1:8000/api/string/IAMNEWTOJAVASCRIPT

And the JSON response is: 

{"id": 1, "string": "iamnewtojavascript"}

How to return this JSON in JavaScript. I have searched the web but none of the results gave me a satisfying answer.

In Python the code is this simple: 

import requests
import json

url = "http://127.0.0.1:8000/api/string/IAMNEWTOJAVASCRIPT"

req = requests.post(url)
p = req.json()
data = json.dumps(p)
print(data)
ottomd
  • 389
  • 4
  • 14
  • What do you mean none of the results gave you a satisfying answer? You have tried anything at all, for instance a simple ajax call to that endpoint ? – adeneo Sep 04 '17 at 11:17
  • I am very new JS and most of the results were using JSON.stringify which from what I understand is making you POST the JSON manually into the data. My API is using the variable in the URL and to do is to retrieve. The framework is doing the rest of the code. – ottomd Sep 04 '17 at 11:25
  • 1
    Your API needs to return the JSON. As far as I understand your current code, you're just printing the JSON to the server console, but you're not returning anything if someone sends a POST request to your API. [So first you've to read how to return something if someone is sending a POST request.](http://docs.python-requests.org/en/latest/user/quickstart/) After you've understand that, you can use the [XMLHttpRequest API to send a POST request](https://developer.mozilla.org/de/docs/Web/API/XMLHttpRequest). The response object will contain the JSON from your API. – Patte Sep 04 '17 at 11:33

1 Answers1

0

In JavaScript you use 'XMLHttpRequest' for that. Have a look here.

Example:

var objectToSend = {
    id: "1",
    string: "iamnewtojavascript"
};

var request = new XMLHttpRequest();

// callback function for readyState
request.onreadystatechange = function( ){
    if( this.readyState == 4 && this.status == 200 )    // check if request has completed, and check if server response is valid 
        alert( this.responseText ) // alert received anwser from server
}

// open connection to server
request.open("POST", /* URL GOES HERE */, true );
// send "objectToSend"
request.send( JSON.stringify( objectToSend ) );

That's how to do a POST-Request to the server. HTTP-Post-Request are used for creating data on the server.

But I think what you want to use is a HTTP-Get-Request. In order to do that just change request.open("POST", ... ) to request.open("GET", 'url', true ); and call request.send() without parameter.

For clarification on differences between HTTP-Post-Request and HTTP-Get-Request, see this.

kangaro0
  • 167
  • 1
  • 11
  • I tried it and it returns "ReferenceError: XMLHttpRequest is not defined". I tried to install but to no avail. I tried to install it using npm. But it says that it is not defined. – ottomd Sep 05 '17 at 05:25
  • Mhn, are you trying to build a website? Browsers should have XMLHttpRequest built in. If your building a node-app, just get it from here: https://www.npmjs.com/package/xmlhttprequest – kangaro0 Sep 05 '17 at 06:19
  • With JavaScript, i'm just trying to extract the JSON the same way I did with python. I'm using this API in AngularJS which is surprisingly easy to use with just $http.post. – ottomd Sep 05 '17 at 07:26
  • Right, in Angular you don't need XMLHttpRequest. $http uses it to send requests -> https://docs.angularjs.org/api/ng/service/$http – kangaro0 Sep 05 '17 at 07:52