How to access json content from external url - javascript

I'm new to jquery and javascript and I've been trying to access the contents of a json file from an external link with no luck. The json file is produced in the link below.
http://api.wmata.com/StationPrediction.svc/json/GetPrediction/A10,A11?api_key=hadtcpbh3w5xjbtyqrzgm88x
I noticed that several examples have a url similar to this "www.samplesite.com/testfile.json" However, as you can see above, the URL is not like this. Opening the link in Chrome takes you directly to the json file contents, however opening the file in IE asks you if you want to save the file "A10,A11.json".
All I want to do is be able to display the json file content in HTML. Can some please show me a brief example.
Thank you

$.ajax({
url: 'http://api.wmata.com/StationPrediction.svc/json/GetPrediction/A10,A11?api_key=hadtcpbh3w5xjbtyqrzgm88x',
dataType: 'jsonp',
success: function(data){// your code here
}
});

You can access the JSON only if the website having the JSON allows cross origin resource sharing(CORS). Find out if that is available, and if it is then post your code.

$.getJSON('http://api.wmata.com/StationPrediction.svc/json/GetPrediction/A10,A11?api_key=hadtcpbh3w5xjbtyqrzgm88x', function(data) {
//data is the JSON string
});

To retrieve JSON from servers outside your own domain, you should set up the callback to retrieve so called 'padded' JSON, which is easily done by adding the following to the jQuery .ajax() function:
dataType: 'jsonp'

Related

XML request in jQuery gets ignored

I have build a webpage that focuses a lot on an XML file to populate it. Now I generated a second one for some additional tasks. Unfortunatly, everytime I try to parse it, it dows not succeed.
I am using very simple code to demonstrate the problem. I stripped the function, so everything it does is writing strings into the browser console.
Once I excecute this code, all I get is "pos1, pos3, pos4"
So the success function is not even excecuted. I know this sounds like a dumb question, but it is really hard for me, to find my mistake right now.
function insertFirstBeginnerQuestion(){
console.log('pos1');
$.ajax({
url: 'xml/questions.xml',
type: 'get',
dataType: 'xml',
success: function(data) {console.log('pos2');},
error: function(){console.log('pos3');},
});
console.log('pos4');
};
Are you trying it in server? Your code works for me and loads the xml properly. GET is a HTTP method, so you have to deploy this in a server and access using http protocol. Otherwise this will give you 404 error while trying to load the xml file.

JSON file not being read correctly on FileZilla/FTP server

When I upload my project to the FTP server the JSON file I'm pulling data from is not working properly. but when I run the program from XAMP, my local server, it runs perfectly fine. I noticed the JSON is not being read correctly by inspecting the element on the FTP server. This is what it looks like:
Here is the app being ran off my local server, where i inspect the element. This is currently working:
This is how I am accessing the file in my code:
$.ajax({
url: 'includes/js/jsons/' + location_name + '.json',
datatype: 'json',
success: function(parsed_json){
// doing stuff
});
Any ideas on why this could be messing up?
Note: I don't think that my JSON file is being recognized as a JSON file but rather a HTML doc or something.
I think this FileZilla changes linebreaks as default and this cause the problem, follow this link to change this behaviour and test again: How can I stop Filezilla changing my linebreaks?
Alrighty, so the problem was in fact that the json file was being read as a string and not a json despite having set the datatype to json. To remedy this problem I had to parse the json file as a json file through this line of code
$.ajax({
url: 'includes/js/jsons/' + location_name + '.json',
datatype: 'json',
success: function(parsed_json){
var parsed_json = $.parseJSON(parsed_json);
});
I also edited a the settings in the FTP process where it will only upload as binary rather than auto.
If you have the same problem, try both. Follow the link provided by Ali Javadi if the parse json does not work.

Getting XML from url through Jquery/ajax

I've got an url here
http://94.23.34.69:7240/
wich contains XML information. I need this information between the tags
<Name>IG_Battlegrounds</Name>
<MapName>Brezaliad</MapName>
<NumberOfActivePlayers>35</NumberOfActivePlayers>
<MaxNumberOfPlayers>50</MaxNumberOfPlayers>
When getting the information i need to print it into html.
I managed to get this trough PHP but that is taking to long and makes my website load slowly. I haven't worked with ajax yet. I hope someone can help me. I tried to use this
$.ajax({
type: "GET",
url: "http://94.23.34.69:7240/ ",
dataType: "xml",
success: function(xml) {
alert("xml");
}
});
But this is not working. It doesn't show anything. Do i need to include something special for using ajax? I also need al the information comming from this link and break up the info so i can use parts of it to print to my website
http://module.game-monitor.com/85.236.100.184:8876/website.php?s=test.css&f=18
Help would be appriciated.
You cannot send an Ajax request to another domain other than yours.
https://en.wikipedia.org/wiki/Same-origin_policy
You can circumvent it using CORS (if you can manage the server) or using a proxy.
Ways to circumvent the same-origin policy

Uploading XML file using AJAX

I've found a mound of questions on SO regarding uploading a file using AJAX although none of them really seem to find my needs.
What I need to do is have a user upload an XML file and have the script run through the XML file and take out the data that is in certain tags in the file and then push the data into a corresponding array which reflects the tag. So say I found a book in an xml, it would push the data into an array NewBooks.
I don't have any experience with PHP, quite honestly its confusing to me. If there is a way without PHP, that would be grand.
reader.onload = function (e) {
console.log('reading file')
$(document).ready(function () {
console.log('analyzing ajax')
$.ajax({
type: "GET",
dataType: "xml",
success: function (xml) {
$(xml).find('book').each(function () {
UploadBooks.push($(this).text());
});
}
})
})
console.log(UploadBooks);
}
That is the code I have although the printed UploadBooks has no elements, even though when I look into the XML file, there are clearly book tags.
Not all browsers can upload files via Ajax. Only those supporting XMLHttpRequest2. Getting that to work with jQuery (as per your example) is going to take some tricks too.
You say you'd rather not use PHP, which would mean no point uploading a file anyway. Check out the HTML5 FileReader API if you want to try and parse the XML file on the client side. You might be able to load the file into a DOM structure to achieve what you're trying to do.

parsing json file in javascript who's url extension is not .json

I want to parse json data from url which contain json data, but its extension is not .json
When I try to request response url using below code it make ajax request with 200 status code.
But I try with other url containing same data with .json extension, it works.
Here is my javascript code
var url='http://jsonurl.com/jsondata';
jQuery.ajax({
url: url,
dataType: 'json',
success: function(d){
jQuery.each(d,function(i){
console.log(i);
});
}
});
So I want solution to parse json content of file in javascript or in jquery, which dont have .json extension but contain json data .
CORRECTION: now seen your example url above and the content type is correct so that was a bit of a red herring.
The extension does not matter.
But the URL you are calling will need to return the correct content type which would be application/json Having said that our app uses text/javascript which works as I believe the browsers are a bit lenient.
So in my case I call a JSP getJSON.jsp that sets it's content type like this
<%# page language="java" contentType="text/javascript; charset=UTF-8" pageEncoding="UTF-8"%>
I am guessing that when you use the .json extention the server is returning with the correct type but your other extensions will not.
I found the exact problem, after discussion with support team of API.
Actually the problem is with content type. They implemented some cache system for that json data, and when my script make request to API url, it send that json data and creates its cache and that cache remain active for some time. If my script create same request, then that json data served from cache who's content type is not json.
Now they are working on this issue.
BTW thanks Peter for help. :)

Categories

Resources