Develop Reference

Display online JSON data on to site with JavaScript/JQuery

Hello I need to display some data from an online JSON file to the frontend of my shopify store but however I do it I keep seeing the CORS error. Does anybody know how I can go about this in the correct way or a way around it?
This is a snippet of how I was trying to attempt it:
<script type="text/javascript" >
var url = 'text/javascript" src="https://******/admin/customers.json';
var j = [];
$.ajax({
type: 'GET',
url: url,
dataType: 'json',
success: function(data) { j = data;},
async: false
});
alert(j);
</script>

Wow. 14+ years of Shopify and still CORS questions. Obviously, you cannot call /admin from the front-end of your Shopify store. That would be silly as you need to then expose your API keys to the world, and that world is nasty. Someone could erase your shop or turn it into a fancy emporium selling peanuts in the shell for $10 each.
If you want to show off customer data to customers use Liquid. If you cannot figure out Liquid, and you must do callbacks to the /admin, you use an App, and a Proxy.

correct instagram authentication method for web applications (users without instagram account)

I would like to show all the instagram pictures with a specific tag in my wedding site, indipendently of the user that has posted it and without asking to my site users to login into Instagram (they could not have an Instagram account!). What is the best and correct way?
What I'm doing now:
1) I've configured a new client "Wedding" in my personal instagram "Manage Clients" section.
2) I've got a token calling MANUALLY (I mean copy and past ONCE the url in my personal browser) the following URL:
https://api.instagram.com/oauth/authorize/?client_id=client_id_of_my_client_wedding&redirect_uri=redirect_uri_of_my_client_wedding&response_type=token
and logging into Instagram with my personal account once asked by the Instagram login popup window
3) I add in my html page the following javascript:
<script>
function myinstagramfunction (json_object)
{
// I fetch here the json object that contains the info of all the pictures returned
}
</script>
<script type="text/javascript" src="https://api.instagram.com/v1/tags/<my_wedding_tag>/media/recent?access_token=<token_retrieved_in_step_2>&callback=myinstagramfunction"/>
The second script performs a cross-domain call to instagram api using JSONP (JSON with Padding) and calling my local function "myinstagramfunction".
Questions:
a) Is this the correct method and the one officially suggested/allowed by instagram?
b) currently the client Wedding is configured in "Sandbox Mode". Do you suggest to submit it to the approval of instagram or is there something not allowed in my procedure?
please let me know!
thank you
Davide

A solution like https://lightwidget.com/ doesn't fit your needs?
No coding skills needed, just copy and paste.. I think this should work ok for a weeding website.
EDIT:
Okay, so try this way:
function myinstagramfunction (json_object)
{
// I fetch here the json object that contains the info of all the pictures returned
console.log("OK");
}
$.ajax({
type: "GET",
dataType: "jsonp",
url: 'https://api.instagram.com/v1/tags/YOUR_HASHTAG/media/recent?access_token=YOUR_ACCESS_TOKEN_HERE&callback=myinstagramfunction',
success: function (result) {
console.log(result);
}
});
Remember that Instagram api calls has rate limits.

Call Google API from javascript code

I want to call the Google API from JavaScript code.
I have a URL to search nearby locations like this:
https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=ww.www,yy.yyy&radius=50&key=XXXXX
When I run that through browser I get the correct JSON result.
But I want to get the JSON response from my JavaScript code.
I don't want to show these locations in Google Maps, just to get the JSON object and manipulate it according to my needs.
I tried to send it via an Ajax call, but it gives an error.

This is what I am using:
//remember to add your API KEY to the url below.
$.ajax({
url: 'https://maps.googleapis.com/maps/api/geocode/json?address=UK&key=<KEY-GOES-HERE>',
type: 'GET',
success: function(res) {
alert(res.status); //responds with "OK"
}
});
You will need to use the jQuery tag for it to function, as its using the jQuery ajax function:
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

Use the places-library of the Maps-Javascript-API: https://developers.google.com/maps/documentation/javascript/places#place_search_requests
You may use the nearbySearch of this library also without a map(but when you print data without a map you must include the Logo)
The URL you've posted may not be requested via AJAX, because the server doesn't send the appropriate headers for a XDomainRequest

efficient and light way to post multiple value field in form to aspx web form

ok, i'll try to better explain the question i am asking: I have an aspx webform that i am using to create an entity, simple data capture. This entity can have many child entities attached to it in a one to many relationship and that are created from the same form. I do not want to use a heavy asp.net component, like a datalist or any custom component to capture those. the way i am currently doing it is that i open a dialog in the page hosting a combobox populated with choices with an ajax call. once the user picks one of the entries and saves, i add an entry to a javascript collection that i use to keep the user choices and display them in a list on the client. when the user submits my form how can i submit this collection and reparse it on the server? I am thinking of using json to store,serialize and then deserialize. is this a good way?

You can post it using the following
var postData = function (myobjectinstance){
var objString = JSON.stringify(myobjectinstance);
$.ajax({
type: 'POST',
url: 'your url',
data: objString,
success: function (){
alert('did it');
},
dataType: 'json'
});
};
An then on the server with json.net you can deserialize the json string
// You can use JSON.Net
public static void PostMethod(string jsonstring)
{
var restoredObject = JsonConvert.DeserializeObject<MyObjectType>(jsonstring)
// do something with your object
}
Or you can use the PageMethods in combination with a scriptmanager if you are using a scriptmanager on your page. see this link for more info.

google spreadsheets - ajax call (get and post)

what I need to do is read the content of a "public" google spreadsheet (by public I mean that I saved the sheet clicking on "File > Publish to the web", so it's accessible without the need to be logged in into a google account), and, why not, write something into it too.
googlin' around, I found that I can access the sheet and get the xml equivalent of the sheet content with something like
https://spreadsheets.google.com/feeds/list/<sheetCode>/od6/public/values
It works great if I load that url into a browser. But I need to find a "javascript-way" to get and handle the returned value, ie the xml (or json, but xml would be preferable).
I tried to use an ajax call, but I think there's something messy with the protocol.. I can't get the server response correctly.
$.ajax({
type: "GET",
url: "https://spreadsheets.google.com/feeds/list/<sheetCode>/od6/public/values",
success: function(data){alert("yeah");},
error: function(){alert("fail..");},
dataType:"xml",
});
I also tried to get the json instead of xml, adding "?alt=json" to the url and changing the datatype, but I still have the problem..
Any idea / suggestion?
Thanks in advance, best regards

You need to request with a JSONP call and you need to specifiy a callback - method. This can be done in jQuery using:
var url = 'https://spreadsheets.google.com/feeds/list/<CODE>/od6/public/values?alt=json-in-script&callback=?';
jQuery.getJSON(url).success(function(data) {
console.log(data);
}).error(function(message) {
console.error('error' + message);
}).complete(function() {
console.log('completed!');
});
Documentation and samples for google spreedsheets .