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.
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>