Getting json data from url instead of local - javascript

I have a searchbox that is working with a local Json data (in the same file) using a var but now I would like to use with an external url json file in the same way that it works before.
What I have now:
var data1 = [{"test_id":"1","test":"test","test2":"test2"}];
What I'm trying:
var data = $.ajax({
dataType: "json",
url: 'myjsonurl',
data: data
});
I've tried with getJSON and with other some recommendations but are not working as I expect, in the image you can see that I'm having the data in both ways but quite different and is not working in the searchbox.
Image: https://i.stack.imgur.com/kWKkz.png
You can find the searchbox here:
https://www.js-tutorials.com/javascript-tutorial/live-search-json-objects-data-using-jquery/
Is there any idea to get same data as I have now from an external file and use it into a var as the searchbox do?
Any ideas?
Thanks in advance,

The way you are doing is, what you are getting is XHR Object.
To get proper JSON response and to work on it, you can write a success function and handle response data there or just use getJSON.
For example:
$.getJSON('https://gist.githubusercontent.com/GeekAb/027c70bd21d006027cd91f538ae4694e/raw/68fda14df1b9fbf6835a02639aa210e88826d19d/SampleJSON',
function( data ) {
console.log(data);
console.log(data[0]);
console.log(data[0]['employee_age']);
});
You can check this Bin link https://jsbin.com/cixezewisi/edit?html,js,console

First off, you have a lot of options when it comes to importing data from an external file (some easier than others). The following list is from another stackoverflow post:
ES6 import
Node.js Require
Ajax
jQuery
I suggest checking out the link, as the poster gave great detail on these options.
Anyways, it looks like you are trying to implement this with Ajax. You basically got it down correctly. Based off the image, what your issue is that using ajax has stringified your data, which is expected. All you have to do is:
var data = $.ajax({
dataType: "json",
url: 'myjsonurl'
});
var parsedData = JSON.parse(data)
This will parse your data into the JS array you are looking for.

Related

How to get JSON from php file using get()?

Below is the code from where I am trying to fetch JSON from data.php file. What is the mistake I am making?
I am using XAMPP here to fetch the data. The path is correct. I also tried using an absolute path, but no luck.
Opening the absolute path in the browser fetches the array of data I am trying to echo here.
//Get data, and render chart
$.get("/web1/chart/data.php", function(data){
//Get data
var parsedData = ParseData(data);
//Render chart
InitChart(parsedData);
});
In javascript, you no where mentioned the data type is JSON, Please try to use $.getJSON( instead of $.get
Otherwise specify the data type as JSON in your get request.
$.get("/web1/chart/data.php", function( data ) {
alert(JSON.stringify(data));
}, "json" );

how to scrape a list of data from a url using jquery

I need to scrape a json data from this url: https://www.google.com/finance/info?q=NSE:NIFTY using jquery. once its scraped i need to pass those value from respected key to a real time updating html table. i am really very new to this.. so please anyone can helping me out to solve this issue.
I tried to solve the same problem with ajax also.i am very new to this front end work so please help me out for solve this issue.
The url returns a JSONP object. You can use the ajax function of jQuery to receive the data as an javascript object and do further work with it ...
$.ajax({
url: "https://www.google.com/finance/info?q=NSE:NIFTY",
dataType: "jsonp",
success: function(response) {
if (response.length) {
for (i = 0, l = response.length; i < l; i++) {
// example, log property 't' of each entry to the console
console.log(response[i].t);
}
}
}
});
Working example.
You will have to go through the data and generate the html for it.
You can use the getJSON function of jquery to fetch the data
$.getJSON('https://www.google.com/finance/info?q=NSE:NIFTY&callback=?', function(data){
console.log(data[0]);
});
Since its a jsonp we need to add the callback param in the url

Read single data in csv data downloaded from url

I'm trying to fetch the data from Yahoo! Finance to get value for currency exchange with this url assuming I'm getting currency exchange for USD to EUR in javascript
http://download.finance.yahoo.com/d/quotes.csv?s=USDEUR=X&f=l1
in the csv, I would receive just the one value I need. Eg. - '0.8994'
Now, in same javascript file, I want this value to be pass into a variable
var USDEUR;
at this point, I'm not sure how to pass the value from the downloaded csv. Could someone enlighten me how to do this properly?
Thanks in advance
It seems you don't actually need to parse this file as a csv, it's basically a plain text string? Assuming jquery:
var USDEUR;
$.ajax({
type: "GET",
url: "http://download.finance.yahoo.com/d/quotes.csv?s=USDEUR=X&f=l1",
dataType: "text",
success: function(data) {USDEUR = data}
});
EDIT: It seems the url has access control issues, you may not be able to do this with a XHTTP request from the client. Is this data meant to be accessed as a public API?
Use JQuery Ajax
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
var USDEUR;
$.get("download.finance.yahoo.com/d/quotes.csv?s=USDEUR=X&f=l1", function(data){
USDEUR = $.parseXML(data);
}, "xml");
</script>

Custom box with autocomplete from Google/Bing. Is there any way to read the received json file?

I try to build a webpage with a search box. I want to take the autocomplete options from Bing (for example).
It is possible to get the autocomplete from bing by:
http://api.bing.com/osjson.aspx?query=YOUR_QUERY
I wrote some code with an autocomplete widget, asking to get the json as jsonp, and I succeed to see (in Fiddler) that the json arrives. But because it arrives only as a json, and not in the required format, I get parseError. (I saw it in the error function. The success function is not called)
The relevant part from my code is:
$( "#mySesearchBox" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "http://api.bing.com/osjson.aspx?query=" + request.term,
dataType: "jsonp",
...
Is there any way to overcome this problem?
I thought about running some server that will get such a query, will ask for the json from Bing and will respond in the required format. However, I prefer more simple solution.
Any advice?
A working demo full : http://jsfiddle.net/LxXJz/
This uses: http://api.bing.net/qson.aspx
or
Here you go "test" like this Demo : http://jsfiddle.net/zNUBc/
.getJSON : http://api.jquery.com/jquery.getjson/
Flick your whole code, or a fiddle I might sort it out for you :) Hope this demo help you.
code
var url = 'http://api.bing.com/osjson.aspx?JsonType=callback&JsonCallback=?';
$.getJSON(url, {
query: 'hulk'
}, function (data) {
document.write(data)
});
Update 16 hours latter :)
Here is the solution using : http://api.bing.com/osjson.aspx
Demo => http://jsfiddle.net/pW6LZ/
see this screeshot carefully:
Updated Code that works after the update by bing:
success: function (data) {
console.log(data);
var suggestions = [];
$.each(data[1], function (i, val) {
suggestions.push(val);
});
//This returns the top 5 suggestions, instead of a list of over 20 suggestions.
response(suggestions.slice(0, 5));

Access a file with javascript

I have seen several examples of how to load a file with javascript, however most of those examples use the data from the file to display it in a html.
I need to keep accessing a file since the file keeps updating and use those values in javascript as variables.
I got the closest with this,
function test() {
$().ready(function(){
var url = 'output.txt';
$.get(url, function(data) {
// can use 'data' in here...
console.log(data);
});
});
}
It logs document to the console and I can collapse that.
There is really a lot of stuff (to much to list here). I only don't know in what kind of format it needs the data to be or how to access it. I do see stuff about xml-stylesheet, so can i even use this?
Changing the way I write the file is no problem for me.
I suggest using a JSON file. For example:
{
username: "Rocket",
realname: "Eric",
age: 23
}
To read this, you can use jQuery's $.getJSON method.
$.getJSON('/path/to/your/file.json', function(data){
var username = data.username;
});
You can also use XML, though I suggest using JSON (it's easier to get the data from it).
<?xml version="1.0" encoding="UTF-8" ?>
<item> <!-- XML needs a root element -->
<username>Rocket</username>
<realname>Eric</realname>
<age>23</age>
</item>
jQuery doesn't have a $.getXML method, so we have to use $.get.
$.get('/path/to/your/file.xml', function(data){
var username = $('item', data).find('username').text();
}, 'xml');
Try using the Jquery GetJson method: Something like this. May need some tweaking.
$.ajax({
url: 'http://www.yourfile.html',
dataType: 'json',
data: data,
success: function(data){
$('#yourdiv').html(data);
}
});

Categories