Display online JSON data on to site with JavaScript/JQuery - javascript

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.

Related

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.

Create a Airport Database with API Access

I'm looking to create a database which I can access without api keys using a link. Essentially, I"m looking to copy this exact system: http://gd.geobytes.com/AutoCompleteCity?callback=?&q=New except I'd like to replace the results with Airport codes and names which I have. Anyone have any idea how I can do this?
Maybe it will help if I clarify further. I am using typeahead and in my custom.js file I have the following which I need to update to use my own dataset but I"m clueless on how to do this.
$('.typeahead').typeahead({
hint: true,
highlight: true,
minLength: 3,
limit: 8
}, {
source: function(q, cb) {
return $.ajax({
dataType: 'json',
type: 'get',
url: 'http://gd.geobytes.com/AutoCompleteCity?callback=?&q=' + q,
chache: false,
success: function(data) {
var result = [];
$.each(data, function(index, val) {
result.push({
value: val
});
});
cb(result);
}
});
}
});
After your comments:
what you want to know are three questions assuming you are gonna work with php and mysql since is easy and basic way to start with web development (imho):
you need to know:
Tutorial of how to create a database with mysql
How to connect mysql with php
How to response a json with php
How to make a ajax request
to a php server with javascript
To be honest man this is a lot to learn and if you are starting with web development I totally suggest you going for the basic first. What you are trying to build at the end is a Restful system, there a lot of frameworks and ways to do this, via Web Api C#, or http://www.slimframework.com/
as example, but again you question is too abroad and not too clear, Im trying to help you because in one moment I started with all this questions, I googled for a tutorials in web development I hope some will work for you https://www.odesk.com/blog/2014/03/10-best-web-development-tutorials-beginners/

jQuery security issue

I'm feeling scared about a solution i'm using in one of my app.
Basically, i use this snippet :
var username = ...;
$.ajax({
type: "POST",
url: "getFeed.php",
data: "username="+username,
success: function(html) {
// do the stuff
}
});
My question is : is this hackable ? If you use the chrome/firefox/... build-in code editor and replace var username = ... by var username = 'user1';, would it work ?
Thanks
Yes, anyone with a javascript debugger will be able to change the variable to whatever username they want. JavaScript is always open to the user and can be modified easily.
Typically you would have a login page to authenticate the user (often cookie based), and then on every subsequent request (Ajax or otherwise) you would be able authenticate the cookie and make sure the user is who he says he is. This will however require a server side solution to the authentication.

Using PARSE REST API

I am currently stuck on a task in which I have to use jQuery ajax to retrieve messages from PARSE HERE API to create something like this:
http://chatbuilder.hackreactor.com/?example=1&username=aa
I was wondering if anyone could explain to me how to use REST api to retrieve messages.
I have looked at other people's coding examples:
https://github.com/stevernator/Chatbuilder/blob/master/draft11
and
https://gist.github.com/guymorita/5726564
They seem to use ajax code like below:
$.ajax({
url: "https://api.parse.com/1/classes/chats",
dataType: "json",
success: function(data) {
var stuff = [];
for(i=0; i < 10; i++) {
stuff[i] = data.results[i].text
}
My question is: from where are the messages being generated from in this app? Do I have to create an account at Parse or would I just use ajax to retrieve this url link:"https://api.parse.com/1/classes/chats"?
Also, where would I find info on this specific class (chats)?
Any input would be greatly appreciated. Thanks!
The parse quick start guide is a very good place to start. The documentation is really good but the tutorials for the JS API are far more complex (backbone) than the documentation. I would download the Todos tutorial as there is some good stuff in it but if you dont know how backbone works its harder to read. I would have made this a comment but I don't have enough rep :(.

Searching JSTOR API using Javascript

im writing a web app in javascript which creates harvard style references for a source.
I was hoping let the user search for journals and articles, and have the form prepopulated
to search the JSTOR library for data they have an SRU interface at http://dfr.jstor.org/sru/ which returns XML for search queries. (e.g. http://dfr.jstor.org/sru/?operation=searchRetrieve&query=dc.title+%3D+%22test%22&version=1.1)
Is there a way to get this xml using javascript?
Ive tried using a jquery ajax request as follows:
var jstor = "http://dfr.jstor.org/sru/?operation=searchRetrieve&query=dc.title+%3D+%22test%22&version=1.1"
$.ajax({
url: jstor,
dataType: "xml",
success: function(data) {
console.log(data);
}
});
But i get an error in firebug "407 Proxy Authentication Required", any ideas?
Looks like you aren't authorized. You need to get an API key in order to access the data.

Categories

Resources