I have an endpoint https://api.iextrading.com/1.0/tops?symbols=aapl but when I try to use .getjson with that url I get a 404 error. In the api documentation it mentions that it may be a jsonp request and if so how do I get .getjson to be able to read this call. Thank you in advance.
The code I have tried is...
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
</head>
<body>
<h2>Create Object from JSON String</h2>
<p id="demo"></p>
<script>
$.getJSON('https://api.iextrading.com/1.0/stock/tsla', function(data) {
var obj = JSON.parse(data);
document.getElementById("demo").innerHTML = obj.id;
});
</script>
</body>
</html>
The API or remote resource must set the header. You can try
function(xhr) {
xhr.setRequestHeader('X-Test-Header', 'test-value');
}
The URL you are using doesn't match your description's URL, and the URL actually returns a 404.
Using your description's URL works, however getJSON parses the data so we don't need to do JSON.parse(data);.
Finally, your data doesn't actually have a id attribute so that will return undefined.
I have changed it to symbol which returns AAPL.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
</head>
<body>
<h2>Create Object from JSON String</h2>
<p id="demo"></p>
<script>
$.getJSON('https://api.iextrading.com/1.0/tops?symbols=aapl', function(data) {
var obj = data[0];
document.getElementById("demo").innerHTML = obj.symbol;
});
</script>
</body>
</html>
Related
I wanted to perform jquery post to php and get the data and post to the console log. But however i cant find data on the console.log after performing post the data. my code is found below...........please help me...
student html page
<html>
<head>
<title>NEW AJAX GET</title>
<script type="text/javascript" src="/Cesium-1.34/ThirdParty/jquery-1.11.3.min.js"></script>
</head>
<body>
<script type="text/javascript">
showData();
function showData()
{
$.post("student.php",
{
PostLastName: "Abdullah",
PostLastReligion: "Muslim"
},
function(data)
{
console.log(data);
});
});
</script>
</body>
</html>
student.php script
<?php
if ((empty($_POST["PostLastName"])) && (empty($_POST["PostLastReligion"])))
{
//Return "Posted Values are empty" if the values is empty
$post_string = 'Posted Values Are Empty';
//echo "<script>console.log(".$post_string.");</script>";
echo $post_string;
}
else
{
//Return the Post Data
$post_string= 'Post Last Name = '.$_POST["PostLastName"]."\n".' Post Last Religion = '.$_POST["PostLastReligion"].'';
//echo "<script>console.log(".$post_string.");</script>";
echo $post_string;
}
?>
I have test your code. i think check first check your loaded jquery included in header.
After change some code like below mention and test your browser console.
<html>
<head>
<title>NEW AJAX GET</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<script type="text/javascript">
showData();
function showData()
{
$.post( "student.php", { PostLastName: "Abdullah", PostLastReligion: "Muslim" })
.done(function( data ) {
console.log(data);
});
};
</script>
</body>
</html>
I hope u resolve u r issue.
I am trying to render local JSON data to the DOM using the following code, but it's not working. I'm not sure what I am doing wrong and would appreciate any help.
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="model-controller.js"></script>
</head>
<body>
<button id="clickMe" style="background-color: #000; color: white;" onClick="myObj()">Click ME</button>
</div>
<div id="demo"></div>
</body>
</html>
model-controller.js
var myObj = JSON.parse("item-data.json", function(data) {return data});
document.getElementById("demo").innerHTML = data;
};
myObj();
The JSON.parse function gets a string that represents a json encoded object, and not a path to a file.
If you need to parse a file you can use jquery to access the file
$.getJSON('item-data.json', function(data) {
document.getElementById("demo").innerHTML = data;
});
Or get the content of the file using vanilla javascript and then JSON.parse it:
var request = new XMLHttpRequest();
request.open("GET", "item-data.json", false);
request.send(null)
var json_obj = JSON.parse(request.responseText);
document.getElementById("demo").innerHTML = json_obj;
JSON.parse parses a given string into a JS object. It doesn't load an external file though. See this page for more info on the JSON.parse method
What you want to do is fetch the file with e.g. jQuery.getJSON, jQuery.get or axios.
jQuery.get( 'https://api.coinbase.com/v2/prices/spot?currency=USD', ( data ) => {
$( '#result' ).text( JSON.stringify( data, null, 2 ) );
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre id="result"></pre>
I have a file index.html with one iframe set and iframe source points to another domain. I am setting localstorage in index.html and trying to get the value in iframe source.(sample.html)
File 1
index.html
<html>
<head>
//js file
</head>
<body>
setting localstorage
Iframe src="55.10.45.045/sample.html"
</body>
</html>
file 2
sample.html
<html>
<head>
//js file
</head>
<body>
getting localstorage Item //Returns null
</body>
</html
You want to use something like this.
Sending information:
window.onload = function() {
var win = document.getElementById('iFrameId').contentWindow;
win.postMessage(JSON.stringify({
key: 'dataKey',
data: dataPassing
}), "*");
};
Receiving information:
window.onmessage = function(e) {
var payload = JSON.parse(e.data);
localStorage.setItem(payload.key, payload.data);
};
This will pass a JSON object into the iFrame, then the script in the frame will take it and push it into local storage.
Use like this...
index.html
<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
click
<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
// Store
localStorage.setItem("link", "http://www.w3schools.com/");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("link");
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}
</script>
</body>
</html>
sample.html
<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
document.getElementById("result").innerHTML = "<iframe src='"+localStorage.getItem("link")+"' width='100%' height='350px' />";
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}
</script>
</body>
</html>
I'm trying to scrape a web page, but getting some weird results in my browser's console (as seen below). Here's my code:
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Icefilms Searcher</title>
<script type="text/javascript" src="jquery-2.0.3.min.js"></script>
</head>
<body>
<script type="text/javascript" src="script.js"></script>
<div id="container" style="width:1100px;position:relative;"></div>
</body>
</html>
script.js
$(document).ready(function(){
var currNum = 168000;
var maxNum = 168005;
function generateNextUrl(){
currNum++;
return currNum-1;
}
scrapeThis(generateNextUrl());
function scrapeThis(theUrl){
$.ajax({
url:
"php.php",
data:
"icefilmsURL=" + theUrl,
success:
function(response){
var movieTitle = $(response).find("#videotitle").find("span:first").text();
$("#container").append("<a href='http://www.icefilms.info/ip.php?v="+theUrl+"' target='blank'>"+movieTitle+"</a><br>");
},
complete:
function(){
if(currNum < maxNum+1){
scrapeThis(generateNextUrl());
}
},
error:
function(xhr,err){
$("#container").append("readyState: "+xhr.readyState+"\nstatus: "+xhr.status);
$("#container").append("responseText: "+xhr.responseText);
}
});
};
});
php.php
<?php
echo file_get_contents("http://www.icefilms.info/ip.php?v=".$_GET["icefilmsURL"]);
?>
The code works fine, but this is what I see in my console:
Any ideas?
You are seeing those in the console because the page you are scraping contains references to relative paths.
That is to say rather than
<img src="http://www.icefilms.info/someimage.jpg">
The code is
<img src="someimage.jpg">
Therefore, when you grab and display their HTML on your own domain the browser is trying to load the image from your domain, localhost in this case. But you do not have the image on your server.
You can use a base href in the HTML to resolve this, or you could find and replace relative path images to include the domain.
<base href="http://www.icefilms.info/">
this is my JavaScript code:-
<!DOCTYPE html>
<html>
<head>
<title>Geolocation API with Google Maps API</title>
<meta charset="UTF-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body onload="getlg()">
<script>
function getlg(){
var region = $('#region').val();
var xml;
$.ajax({
url: "http://maps.googleapis.com/maps/api/geocode/xml?address="+$("#region").html()+"&sensor=true",
async: false,
dataType:'text/xml',
success: function(data){
xml=data;
$('#Div_Get').html('');
}
});
xmlDoc = $.parseXML( xml );
$xml = $( xmlDoc );
var abc= xmlDoc.getElementsByTagName("lat")[1].firstChild.nodeValue;
}
</script>
<div id="region">Rajkot</div>
<div id = "Div_Get"></div>
</body>
</html>
here i am try to set value in url and get the xml file.
now i try to get from this xml lat and long value.
i am try getElementsByTagName but not success nothing is output and give me error xmlDoc is null on this line var abc= xmlDoc.getElementsByTagName("lat")[1].firstChild.nodeValue;
please help me out of this.
thanks.
Change you datatype from
dataType:'text/xml',
To
dataType:'xml',
And Please have a look at documentation for Specifying the Data Type for AJAX Requests.