Develop Reference

Reading a CSV file with jQuery

I have a downloaded CSV file which I would like to parse and use to create JSON objects for each record. The file is on my local machine but I have read that JavaScript has security measures in place that prevent access to these files.
Some examples show using csv.js with the following:
$.ajax({
url: "G:\downloaded_files\filename.csv",
aync: false,
success: function (csvd) {
csv_as_array = $.csv.toArrays(csvd);
},
dataType: "text",
complete: function () {
// use the array of arrays (variable csv_as_array)
// for further processing
}
});
When running this it just creates a GET request in the console. I am treading on unfamiliar territory here so any explanations would be great.
If I was to do this using Ruby I would do this, which hopefully will give you an indication of what I am trying to achieve:
require 'csv'
class FileRead
csv_text = File.read('/home/richardlewis/Downloads/csvtest.csv')
csv = CSV.parse(csv_text, headers: true)
csv.each do |row|
hash = row.to_hash
puts(hash)
end
end
I'm hoping this makes sense and someone can point me in the right direction.

You cannot call local files (from hard dics) using Ajax, or by any means from a web browser. You will have to publish your file using some sort of server. If you are using Linux you should have an Apache server already installed.
You need a REST service that will return your file in some format. JSON is the best, because it's easy to manipulate JSON data on the front-end.
It would look like this:
$.ajax({
url: "http://localhost:8080/services/rest/get_file", // your rest address
...
});

Using multiple ajax calls in one javascript function

Thanks in advance for any help.
Is it bad practice and/or inefficient to use multiple $.ajax calls in one javascript function? I've been working on one and have a simple testing environment set up on my computer (apache server with php/mysql), and I've noticed that the server will crash (and restart) if I have multiple ajax calls.
I have two ajax calls currently: one passes 4 pieces of data to the php file and returns about 3 lines of code (pulling info from my sql database), the other simply gets the total rows from the table I'm working with and assigns that number to a javascript variable.
Is it just that my basic testing setup is too weak, or am I doing something wrong? See below for the two ajax calls I'm using:
$.ajax({
type: "GET",
url: "myURLhere.php",
cache: false,
data: {img : imageNumber, cap : imageNumber, width : dWidth, height : dHeight},
})
.done(function(htmlpic) {
$("#leftOne").html(htmlpic);
});
$.ajax({
type: "GET",
url: "myotherURLhere.php",
cache: false,
success: function(data) {
lastImage = data
}
})

Short answer: two ajax request on a page is absolutely fine.
Longer answer:
You have to find the balance between minimalising the number of ajax calls to the backend reducing the traffic and communication overhead; and still maintaining a maintainable architecture (so do not pass dozens of parameters in one call to retrieve everything - maybe only if you do it in a well designed way to collect every parameter to send)
Also most likely there's something wrong with your backend setup, try looking into webserver logs

Use Javascript to receive variable from remote php file?

I need to retrieve a variable from a remote php file using javascript. I'm doing this using phonegap so same origin policy doesn't apply. I guess I need to use json / ajax but I can't find any tutorials that show me how to do this.
Is it as simple as having this in a php file:
<?php
$var = 'stuff';
echo json_encode( $var );
?>
And something like this in my application:
$.getJSON('mysite.com/test.php', function( data ) {
$.each( data, function( i, entry ) {
alert( entry );
});
Or is this totally the wrong approach? Any help would be great, thanks.

so for starters here are the docs on JQuery's ajax & the docs for JQuery's getJSON; and finally a slightly dated but decent tutorial explaining the basics on how to get started with raw .JSON files.
typically when I am dealing with JSON i am interacting with a web API; and most of the time they are RESTful api's at that... creating one is slightly more complex than what you have there but your thought process is on track.
here is a working access point to the google finance stock quotes api running a query on microsoft:
http://finance.google.com/finance/info?client=ig&q=MSFT
and an example of a json call (using jsonp for accessing an external url):
$.ajax({
url: 'http://finance.google.com/finance/info?client=ig&q=MSFT',
dataType: 'jsonp',
success: function(data){
console.log( data );
}
});
to make things easier i would try and break the work into two steps... first get a handle on accepting data from a api you know is functioning (ie google finance above)... and then move on to the next step of trying to write your own WebAPI in php (eg say you wanted to build your "variable" into a database or something a bit more useful than a flat php file). this way you can debug a bit easier with less hair loss

I'm using jquery and
I used to do like this in my PHP (if using json):
<?php
$var = 'stuff';
echo '{"var":"'.$var.'"}';
?>
it would return to a json.
and the ajax :
$.ajax({
url : "mysite.com/test.php",
dataType : "json",
data :"",
type : "POST",
success :
function (data){
alert(data.var);
}
});
(data and type in the ajax are not needed if you just want to get json from "mysite.com/test.php");

How to get data using jsonp?

I'm trying to fetch some text from http://www.ikea.com/us/en/catalog/products/10176292
using jsonp.
To test if it works this is what I did
$.getJSON("http://www.ikea.com/us/en/catalog/products/10176292?format=json&jsoncallback=?",function(data) {
$('h1').text(data.modified);
});
This doesn't work so it's probably no valid but all the jsonp documentation I've found on google use either twitter or flickr API as examples. I'm pretty sure IKEA doesn't have an API so those methods don't really help me.
However this does work and returns text from flickr
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=25053835#N03&format=json&jsoncallback=?",function(data) {
$('h1').text(data.title);
});
I'm attempting this because I saw this example http://www.foxycart.com/whos-using-foxy/case-studies/modernash and it appears to work with jsonp fetching text data from ikea. I don't need anything as complex, just to be able to retrieve some simple text.
Can someone please point me in the proper direction or give some tips.
Thanks

The link to Ikea isn't JSON so you can't pull from it. It looks like Ikea doesn't have a public API. So, you won't be able to get any data from them to use.
For Flickr you are on the right track. Here is how you can do it.
$.ajax({
dataType: 'jsonp',
url: 'http://api.flickr.com/services/feeds/photos_public.gne?id=25053835#N03&format=json&jsoncallback=?',
success: function(data){
console.log(data);
}
});
If you want to get the title you would do data.title and so on.

You can supplement your getJSON with ajax (see official docs here - http://api.jquery.com/jQuery.getJSON/), then it is super easy to declare JSONP.
$.ajax({
dataType: "jsonp",
url: 'http://api.flickr.com/services/feeds/photos_public.gne?id=25053835#N03&format=json&jsoncallback=?',
data: data,
success: function( data ) {
$('h1').text(data.modified);
});
Edit: #Matt Ball is right. Before you use something like the ajax call above you need to make sure that the URL that you are using is returning actual json. You should be able to navigate to the desired URL and see the raw JSON. Then all the above function will do is fetch and parse accordingly.

It looks to me like they are just scraping data from the site. All the product information is stored in the html and they are adding that to an object into their own cart.
Since the you drag the image to their bookmarklet I looked at the data stored in the image # http://www.ikea.com/us/en/catalog/products/20011408/#/80193735 :
<img id="productImg" src="/us/en/images/products/lack-side-table__0115088_PE268302_S4.JPG" border="0" alt="LACK Side table IKEA The high-gloss surfaces reflect light and give a vibrant look. Easy to assemble. Low weight; easy to move." title="LACK Side table - high gloss red, 21 5/8x21 5/8 " - IKEA" width="500" height="500" class="mn_global_shadow ui-draggable" style="width: 244px; display: inline-block; height: 244px; left: 0px; top: 0px;">
In the title we get the name, finish, color, and size.
The price and quantity are held in id's/classes which seem standard across the entire site.
How it all works beyond that I haven't looked at, but it doesn't seem too complex.
Hope this helps.

You probably need to provide some custom headers. Wireshark is your friend

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 .