Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Ajax JSON API Connection

Status
Not open for further replies.

craigward

Programmer
Nov 13, 2007
230
GB
Hi I am trying to connect to a JSON API using Ajax located here
I want to be able to retrieve property data, add new and update existing properties which can all be done with this API. Problem is I have never used an API before and am going round in circles after days of trying lots of online solutions and not really getting anywhere. I do have a concept of programing at an intermediate level but could really do with some help with this.


Below is the code I am using and I really want to add a property using the JSON the site recommends here,
In theory I think this code should add the properties, but in theory i might be doing things very wrong.... Any advice would be much appreciated, thank you for looking.

The browser console show no errors which I making it tough to know where I have gone wrong.

Code:
<html>

<head>
<meta charset="UTF-8"> 
<title> Ajax and Json | Tutorial</title>

<style>
	body{

		font-family: sans-serif;
	}
		.ajax-container{
		width: 50%;
		margin: 50px auto;
	}
	#btnAjaxCall{
		height: 50px;
		width: 120px;
		border: none;
		border-radius: 6px;
		color: white;
		background: #3498db;
		outline: none;
		font-size: 22px;
		opacity: 0.7;
		padding: 10px;
	}
	#btnAjaxCall:hover{
		cursor: pointer;
		opacity: 1;
	}
	.item-details{
		margin-top: 10px;
		border: 1px solid #ddd;
		padding: 6px;
	}

</style>

	

</head>



<body>

	<div class="ajax-container">
		<input type="button" id="btnAjaxCall" value="Ajax Call" />
		<div class="display-data">

		</div>
	</div>

</body>
<script src="[URL unfurl="true"]https://code.jquery.com/jquery-3.3.1.min.js"[/URL] integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>
	var count = 0;
	$("#btnAjaxCall").click(function(){
		fetchDataAndDisplay();
	});
	function fetchDataAndDisplay(){
		$.ajax({
		
			headers: { 
						'content-type': 'application/x-[URL unfurl="true"]www-form-urlencoded',[/URL]
						//'Access-Control-Allow-Origin': '[URL unfurl="true"]http://localhost:8081',[/URL]
						'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE',
						'Access-Control-Allow-Headers': 'Content-Type, Authorization',
						},

			url:"[URL unfurl="true"]https://api.beds24.com/json/createProperties",[/URL]
			method:"POST",
			dataType: 'json',
			data: {
					"authentication": {
						"apiKey": "myapikeyXXXXXXXXXXXX"
					},
					"createProperties": [
						{
							"name": "Fairview 1",
							"propKey": "2222222222222222",
							"notifyUrl": "http:\/\/[URL unfurl="true"]www.newhotel1.com\/api\/newbookings",[/URL]
							"roomTypes": [
								{
									"name": "Room 1xx",
									"qty": "1",
									"minPrice": "10.00"
								},
								{
									"name": "Room 2xx",
									"qty": "3",
									"minPrice": "10.00"
								}
							]
						},
						{
							"name": "New Property 2",
							"propKey": "YourKeyToUseForThepropIdNewProperty2",
							"notifyUrl": "http:\/\/[URL unfurl="true"]www.newproperty2.com\/api\/index.php?action=updatebooking",[/URL]
							"roomTypes": [
								{
									"name": "Camp Sitex",
									"qty": "10",
									"minPrice": "10.00"
								},
								{
									"name": "Cabinx",
									"qty": "2",
									"minPrice": "10.00"
								}
							]
						}
					]
				  },	
			//console.log(sucess);
			
		})
		//console.log(readyState); 
	}


</script>
</html>
 
This looks more like jquery than standard javascript. Do you have jquery installed?

Try putting the <script> sections either in <head> or <body>.
 
Hi,
Yea it is jQuery but can't find a specific forum. I moved the scripts into the body. Still not adding the property and no errors.

This is the console output once the script is run. I don't know much about API responses but that looks about what I would imagine. Any more thoughts?


Request URL: Request Method: POST
Status Code: 200 OK
Remote Address: 195.201.74.20:443
Referrer Policy: no-referrer-when-downgrade
Access-Control-Allow-Headers: access-control-allow-headers,access-control-allow-methods
Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE
Access-Control-Allow-Origin: *
Allow: POST, GET, OPTIONS, PUT, DELETE
Connection: Keep-Alive
Content-Length: 56
Content-Type: application/json
Date: Wed, 05 Sep 2018 10:01:01 GMT
Keep-Alive: timeout=5, max=99
Server: Apache
Provisional headers are shown
Accept: application/json, text/javascript, */*; q=0.01
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Methods: GET,PUT,POST,DELETE
Content-Type: application/x-Origin: Referer: User-Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36
authentication[apiKey]: 12345683726153423141516
createProperties[0][name]: White house1
createProperties[0][propKey]: 2222222222233333
createProperties[0][notifyUrl]: createProperties[0][roomTypes][0][name]: White 1xx
createProperties[0][roomTypes][0][qty]: 1
createProperties[0][roomTypes][0][minPrice]: 10.00
createProperties[0][roomTypes][1][name]: White 2xx
createProperties[0][roomTypes][1][qty]: 3
createProperties[0][roomTypes][1][minPrice]: 10.00
createProperties[1][name]: New Property 2
createProperties[1][propKey]: 2222222222244444
createProperties[1][notifyUrl]: createProperties[1][roomTypes][0][name]: White Sitex
createProperties[1][roomTypes][0][qty]: 10
createProperties[1][roomTypes][0][minPrice]: 10.00
createProperties[1][roomTypes][1][name]: White 1
createProperties[1][roomTypes][1][qty]: 2
createProperties[1][roomTypes][1][minPrice]: 10.00

If I take out just this section of code and run it on booking24.com test area, it adds the property instantlly so i know this is formed right. I must be so close!

Code:
{
					"authentication": {
						"apiKey": "12345683726153423141516"
					},
					"createProperties": [
						{
							"name": "Fairview 1",
							"propKey": "2222222222222222",
							"notifyUrl": "http:\/\/[URL unfurl="true"]www.newhotel1.com\/api\/newbookings",[/URL]
							"roomTypes": [
								{
									"name": "Room 1xx",
									"qty": "1",
									"minPrice": "10.00"
								},
								{
									"name": "Room 2xx",
									"qty": "3",
									"minPrice": "10.00"
								}
							]
						},
						{
							"name": "New Property 2",
							"propKey": "YourKeyToUseForThepropIdNewProperty2",
							"notifyUrl": "http:\/\/[URL unfurl="true"]www.newproperty2.com\/api\/index.php?action=updatebooking",[/URL]
							"roomTypes": [
								{
									"name": "Camp Sitex",
									"qty": "10",
									"minPrice": "10.00"
								},
								{
									"name": "Cabinx",
									"qty": "2",
									"minPrice": "10.00"
								}
							]
						}
					]
				  }
 
I'm getting the following on the console from firefox, even after adding your commented out line on Access-Control-Allow-Origin. Possibly something to do with my PC's permissions. Maybe someone else can help
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at (Reason: CORS header 'Access-Control-Allow-Origin' missing).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at (Reason: CORS request did not succeed).
 
I'm seeing that too, the beds24 support say they allow cross-domain JSON requests ,they said 'e include the following header "Access-Control-Allow-Origin: *"' I added this but still see the error..... I'm pulling my hair out on this one, tried so many things.



any one got any other ideas?
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top