Generate POSTMAN in webpage with JSON or something - json

Question

I have a restAPI code from a programmer from JNE, company stands for delivery service.
They say that this API can be run in POSTMAN (Google Chrome Application)
It works fine in the POSTMAN, where in this application I just need to insert the request URL (which I have got from the JNE company) and two header of keys and values as follow;
KEY VALUE
----------------------------------------------
username mycompany
api key 4534645756864234523424
The method for this is POST and when I posted it, it gives me the results as how expected.
My problem now is, how can I run this code in my page, so that I don't need to run this in postman.
I am just this day going to learn JSON if anybody can help me out with this.
[UPDATE QUESTION 1]
{
"version":1,
"collections":
[
{
"id":"c8b12431-8586-cbdd-aef7-056ec177509a",
"name":"asdasdadasdasdasd",
"timestamp":1415593872130,
"requests":
[
{
"collectionId":"c8b12431-8586-cbdd-aef7-056ec177509a",
"id":"d1b2ed66-781d-d02e-c4eb-0416dd3e07a1",
"name":"http://api.jne.co.id:8889/tracing/mycompany/origin/key/jak",
"description":"",
"url":"http://api.jne.co.id:8889/tracing/mycompany/origin/key/jak",
"method":"POST",
"headers":"username: mycompany\napi_key:089a12ffb8cd5009bdfa4ba5bdb9ee26\n",
"data":
[
{
"key":"username",
"value":"mycompany",
"type":"text"
},
{
"key":"api_key",
"value":"dsfsdfsdfs98d98sdfsdf9898dsfs",
"type":"text"
}
],
"dataMode":"params",
"timestamp":0,
"responses":[],
"version":2
}
]
}
],
"environments":[],
"headerPresets":[],
"globals":[]
}
From the update question above; my first question is: ]
In what format I have to save this file: JSON? or WHAT?
Should I save this file in one file with my webpage? or Can I save it as external file?
From the code above, I get the result as follow:
{
"detail": [
{
"code": "CGK10000",
"label": "JAKARTA"
},
{
"code": "CGK10100",
"label": "JAKARTA BARAT"
},
{
"code": "CGK10300",
"label": "JAKARTA PUSAT"
},
{
"code": "CGK10200",
"label": "JAKARTA SELATAN"
},
{
"code": "CGK10500",
"label": "JAKARTA TIMUR"
},
{
"code": "CGK10400",
"label": "JAKARTA UTARA"
}
]
}
If you have a look to the "label" it is generated from the key of the last string in the: "name":"http://api.jne.co.id:8889/tracing/mycompany/origin/key/jak",
The result of the label from the last string of jak, is what I want to insert in a dropdown html tag, in where the user will choose that (the name of the location).
[Update with complete code]
POST /tracing/mycompany/origin/key/jak HTTP/1.1
Host: api.jne.co.id:8889
Content-Type: application/json
username: mycompany
api_key: 089a12ffb8cd5009bdfa4ba5bdb9ee26
{
"version":1,
"collections":
[
{
"id":"c8b12431-8586-cbdd-aef7-056ec177509a",
"name":"asdasdadasdasdasd",
"timestamp":1415593872130,
"requests":
[
{
"collectionId":"c8b12431-8586-cbdd-aef7-056ec177509a",
"id":"d1b2ed66-781d-d02e-c4eb-0416dd3e07a1",
"name":"http://api.jne.co.id:8889/tracing/mycompany/origin/key/jakarta",
"description":"",
"url":"http://api.jne.co.id:8889/tracing/mycompany/origin/key/jakarta",
"method":"POST",
"headers":"username: mycompany\napi_key:089a12ffb8cd5009bdfa4ba5bdb9ee26\n",
"data":
[
{
"key":"username",
"value":"mycompany",
"type":"text"
},
{
"key":"api_key",
"value":"089a12ffb8cd5009bdfa4ba5bdb9ee26",
"type":"text"
}
],
"dataMode":"params",
"timestamp":0,
"responses":[],
"version":2
}
]
}
],
"environments":[],
"headerPresets":[],
"globals":[]
}
I have saved this file as jne.json and jne.html but the browser just show the full code insted show the result as how the postman does. I think there are many things I am missing here.

Answer 1

The POST request would look something like the following
POST /tracing/mycompany/origin/key/jak HTTP/1.1
Host: api.jne.co.id:8889
Content-Type: application/json
username: mycompany
api_key: 089a12ffb8cd5009bdfa4ba5bdb9ee26
{
... your JSON ...
}
You can save JSON with the .json file extension. If your request is always the same you can save this file with your webpage, but normally an HTTP request is constructed before sending (that means you normally send different requests).
To fill the dropdown list you just have to parse the JSON response.