I am trying to create a map and I have been using this tutorial https://newmedia.report/classes/coding/2018/mapping-in-d3/. I think the problem is that I can't load local files, but I am not sure how to fix it.
I have looked at other StackOverflow answers but keep getting the same problem. I tried setting up a dev server but it still isn't working. I also tried in firefox with the same code and got the error The Same Origin Policy disallows reading the remote resource at the file. (Reason: CORS request not HTTP). Then an error saying TypeError: NetworkError when attempting to fetch resource.
I am using all the same code from the tutorial but it isn't working.
Promise.all([
d3.json("ccc_precinct_topo.json"),
d3.csv("CCC_Primary_results.csv")
])
.then(function(data){
URL scheme must be "HTTP" or "HTTPS" for CORS request.
I keep getting an error like this for both files.
The recommended way would be to install a web server on your development system, e.g. XAMPP for a Windows or LAMP for a Linux system. Otherwise whenever you test something using AJAX calls you will run into problems of some sort.
Just for demonstration purposes you could save the JSON and CSV data as local variables. To do so, copy the contents of the JSON file "ccc_precinct_topo.json" into array data[0]:
var data= [];
data[0]= [...]; // contents of "ccc_precinct_topo.json"
In a second step, save the contents of the CSV file "CCC_Primary_results.csv" as a string into a new variable and use d3.csv.parse() to convert it into an array structure:
var csvContent= 'String|With|CSV|Values';
data[1]= d3.csv.parse(csvContent);
Now to see if you get correct values, send the data to the console:
console.log(data);
Open the Developer Tools (Hit F12) and refresh the page. In the Console section you should see an array with two elements, both should be array structures.
Instead of using Promises and d3.json(), d3.csv(), continue with the code you find below the .then(function(data){.
P.S. In most cases someone writing a tutorial about web services or pages assumes that the shown code will be used as part of a web project and thus will be loaded by a web server. But you are right, it could have been mentioned as a prerequisite, e.g. "Before you start, set up LAMP or XAMPP on your development system".
Related
I’m a bit new to javascriipt/nodejs and its packages. Is it possible to download a file using my local browser or network? Whenever I look up scraping html files or downloading them, it is always done through a separate package and their server doing a request to a given url. How do I make my own computer download a html file as if I did right click save as on a google chrome webpage without running into any server/security issues and errors with javascript?
Fetching a document over HTTP(S) in Node is definitely possible, although not as simple as some other languages. Here's the basic structure:
const https = require(`https`); // use http if it's an http url;
https.get(URLString, res => {
const buffers = [];
res.on(`data`, data => buffers.push(data));
res.on(`end`, ()=>{
const data = Buffer.concat(buffers);
/*
from here you can do what you want with the data. You can write it to a file
with fs, you can console.log it using data.toString(), etc.
*/
});
})
Edit: I think I missed the main question you had, give me a sec to add that.
Edit 2: If you're comfortable with doing the above, the way you access a website the same way as your browser is to open up the developer tools (F12 on Chrome) go to the network tab, find the request that the browser has made, and then using http(s).get(url, options, callback), set the exact same headers in the options that you see in your browser. Most of the time you won't need all of them, all you'll need is the authentication/session cookie.
So, guys, I get src's, from another site, and have the array like ["www.another.com/pic1.png", "www.another2.com/pic2.jpg"].
I tested XMLHttpRequest, and file.size, but CORS does not allow to do it.
How can I get file size, from this array items?
First of all, You must to resolve CORS problem. so you may can use a Node.js server as web crawler server to get data from another website.
Then you can use any tool which is can get detail of file to know the file size of the image.
I'm a desktop developer that is trying to learn some web basics on the side. I've previously put together an asp.net mvc website that worked more or less okay and am currently working on a simpler, html/css/js only website.
A number of the pages on the website will contain images, with a number of pieces of data accompanying them, so I thought I'd put together a JSON with all of the data, including the links to the images and generate the image list on page load. The problem that I ran into is the JavaScript cross origin request when trying to fetch the JSON file.
I've looked around at solutions and most of them recommend spinning up a server - either asp.net or node.js to fetch the JSON from. Couple of questions:
If I can write HTML that references image files, why can I not fetch a json from javascript? Is there a fundamental piece of understanding that I'm missing here?
Is there any other way of using a JSON without spinning up a web server? Should I try embedding it into the HTML? Is that a bad idea?
Any other pointers/links to resources with relevant info :)
// My JavaScript:
<script>
$(document).ready(function(){
buildGallery('test.json', '#gallery');
});
// Builds a collection of thumbnails from the json specified inside of specified div
function buildGallery(jsonUrl, galleryDiv){
$.getJSON(jsonUrl, function(data){
// Ensure the data is in correct format
if (typeof(data) !== 'object'){
return;
}
// Build the gallery
$.each(data['images'], function(key, image){
var thumbnail = '<img src="' + image['url'] + '"/>'
$(galleryDiv).append(thumbnail);
});
});
}
</script>
This is based of: https://api.jquery.com/jQuery.getJSON/
Thanks heaps!
There are a couple issues with what you are trying to accomplish with the provided code.
First, you are trying to make an Ajax request to a resource that is not hosted on an http server. Ajax is a wrapper for XMLHttpRequest which was designed for fetching resources using the http protocol. However, it can support other protocols such as file, and ftp.
Second, CORS is not controlled by the browser, it's controlled by the http server. Cross domain origin requests can work, but only if the resource you are requesting responds with an http header that allows your domain to access it. Since the resource you are requesting has nothing to do with http, it will probably throw an error.
So why do images work using the file:// scheme? The <img/> tag supports loading resources using any scheme your browser cares to support. It turns out most browsers support it.
So I can't get json into my app without an http server!#? Yes and no. No because you usually cannot request a resource not served through an http server using XMLHttpRequest. However, you can still request resources through other means.
I recommend using the File API for reading files from the users filesystem.
Background:
I have a html and javascript program with which I want to use to get data from an excel file (file is located on my computer, in the same folder as my code and file type is csv although ideally I'd rather read xlsm if possible however I suspect csv is easier). I then want to be able to use this data to do a bunch of things. Ideally I want to be able run this in an iframe within a google earth (the desktop application) bubble however getting it running in any one browser would be okay. So far I have been trialing it in Chrome, IE, and an iframe in Google Earth but I've run into problems.
So apparently even though these files are on my computer in the same folder as my html and javascript this is considered a cross domain request. I am unable to change the server in any way and I have heavy restrictions on what I can download to such an extent that you can just assume that downloading something is not a solution. Doing some research I came across JSONP so I have been trying to use this method to get the data. However I'm running into issues trying to get it working and I'm not sure why.
Code:
This is the relevant code in my html file:
<script type="text/javascript" src="file:\\\O:\user name\folder name\filename.csv?callback=mycallback"></script>
Error:
This is the error I get in Chrome:
Failed to load resource: net::ERR_FILE_NOT_FOUND file:///O:/user%20name/folder%20name/filename.csv?callback=mycallback
I am not sure why the file is not being found. Any suggestions? I was wondering if the spaces in the foldernames are causing the issue? I hope this is not the case as I am unable to change the "user name" folder name to not have a space :-/. Thanks for any help.
i'm very new to this web related problems, please help
i'm working on sencha which proves to be very difficult wen it comes to json parsing . . . .
so i'm planning on retrieving the data to the html page and then load it into my js file. . .
so here is the problem:
i've already asked about it and got a reply..
http://jsbin.com/uwuca5
but now wen i use the html source code locally in my system or even by using the IIS i couldn't parse the data. . . . . . .
here is the link for my json file:
http://compliantbox.com/optionsedge/sample.php
i'm trying to use this link in my code and retrive the data but the data is returning null
Please Help
Thank you,
You may be running into the Same Origin Policy. Are you trying to retrieve the data from a different "origin"? For instance, when running locally on IIS (ajax stuff mostly doesn't work unless you're using a server), are you trying to reach out to http://compliantbox.com/optionsedge/sample.php to get the data? If so, that won't work in most cases (see the link for why). For instance, if I modify the JSBin code I gave you in my previous answer to use http://compliantbox.com/optionsedge/sample.php instead of http://jsbin.com/uwura4, it fails (example).
Cross-origin calls are possible, but you largely have to be in charge of both sides of the call for them to work. There's CORS (requiring special headers from the server, and support in the browser that's missing in IE6 and IE7; it's in IE8 but you have to use an XDomainRequest instead of an XMLHttpRequest), and there's JSON-P (requiring the source to support JSON-P explicitly).
I'm not familiar with Sencha, but it seems that you're trying to make a cross-domain AJAX call (calling the url http://compliantbox.com/optionsedge/sample.php from within another domain, e.g. from within your local web-site) which is basically not allowed (at least by using XmlHTTPRequest object).
I'd suggest you to take a look at these posts:
Forum post on jQuery web-site
The jQuery cross-domain AJAX guide
-- Pavel
If you need read the JSON from a different domain you can try first read the document from your server and serve it.
Jquery:
$.getJson("Url-in-your-domain");
Url-in-your-domain:
Read the remote document and serve it.
Try if you don't find any solution.