URL Json API coding

  • Hi everyone, I’m hoping you can help me with this. I have a custom made API (made by someone else) that I need to implement on a site. The API uses Json and is accessible via URL’s. The problem is I don’t know the best way to put it into action in WordPress. It should display a clothing list and clothing details for a particular piece of clothing. Can anyone give any advice, or make any recommendations on how to get this to work? Thanks in advance for your help. Here’s what I have so far:

    -----Begin------
<script	src="resources/js/jquery-1.10.2.js"></script>
<input type="button" onclick="ajaxtest1()" value="getAllClothing"> &nbsp; &nbsp; Clothing List &nbsp; &nbsp;<select id="clolist"></select><br/>
<br/>
<input type="text" id="cloid"><input type="button" onclick="ajaxtest2()" value="getClothingDetails"><br/>

<div id="test1"></div>
<script>
	var headerdata = {};
	headerdata["auth"] = "1234567890987654321qwerty";

	function ajaxtest1() {
		var data = {
			"consumerName" : "microsite",
			"serviceName" : "getClothingList"
		};
		ajaxCall(data, headerdata,ClothingList)
	}

	function ajaxtest2() {
		var cloid=$("#cloid").val();
		var data = {
			"consumerName" : "microsite",
			"data" : "{\"ClothingId\" : \""+cloid+"\"}",
			"serviceName" : "getClothingDetails"
		};
		ajaxCall(data, headerdata,ClothingDetails)
	}

	function ClothingList(data) {
		var obj=JSON.parse(data)
		var list=obj.ClothingList;
		$("#clolist").html("");
		if(list.length==undefined){
				$("#clolist").append(new Option("--No Clothing--", ""));
		}else if(list.length>0){
				$("#clolist").append(new Option("--Clothing--", ""));
			$.each(list, function (i, val) {
				$("#clolist").append(new Option(val.ClothingName,val.ClothingID));
			});
		}
	}

	function ClothingDetails(data) {
		$("#test1").html("");
		var obj=JSON.parse(data)
		var clo=obj.clothing;
		console.log(clo);
		$("#test1").append("Name : <span>"+clo.ClothingDisplayName+"</span><br/>")
		$("#test1").append("Color : <span>"+clo.clothingColor+"</span><br/>")
		$("#test1").append("Sizes : <span>"+clo.clothingSizes+"</span><br/>")
	}

	function ajaxCall(data, headerdata,callback) {
		$.ajax({
			type : "POST",
			url : "https://1.1.1.1:8111/meh/api/apiService",
			data : data,
			headers : headerdata,
			crossDomain : true,
			success : callback,
			error : function(data, status) {
				alert("Error  " + status);
			}
		});
	}
</script>
---------End
Viewing 1 replies (of 1 total)

  • First of all, what were your developer thinking sending the auth key using that “headerdata[auth]” via Ajax? If that is what I think it is then I will tell you now, DO NOT USE THAT CODE!!!.

    Anyway, if you still want to take the risk you can do two things, one is to create a custom page in a custom theme or an existing one, paste that code in that file and “voila!”. The second option is to create a custom plugin that does the same as the custom page, but with the plugin you will have a better behavior.

    For both options you will need to have experience writing code, if not you will end up writing something half-functional and half-broken, but if you do not have problems with this then follow these instructions:

    1. Create a PHP file inside your plugins folder,
    2. Add the metadata required by WordPress to bootstrap the plugin [1],
    3. Add (at least) a minimal protection to that file [2],
    4. Define a condition to execute the code, hint: REQUEST_URI
    5. Paste the code that your developer wrote,
    6. Enjoy.

    Actually you can follow the same steps to create the custom theme, or the custom page in a existing theme, just remember to add a call to the WordPress functions “get_header” and “get_footer” at the top and bottom of the file to respectively load the header and footer of the main theme.

    [1] https://cixtor.com/pastio/raw/9z0c5u
    [2] https://cixtor.com/pastio/raw/wdhl9q

Viewing 1 replies (of 1 total)
  • The topic ‘URL Json API coding’ is closed to new replies.