The situation is that i am trying to get d3 to read a JSON file which is stored in Windows Azure Blob storage. If i paste the url into a browser then the file is downloaded to my machine. I would like to be able get the JSON file from the url with d3, but no graph is produced which leads me to believe that the d3 is unable to read the file.
Here is a snippet of the code:
var url = "http://storageName.blob.core.windows.net/containerName/file.json";
d3.json("url", function (json) {
//code here
})
I have set the container to public on Azure, so i believe that it should be accessible to anyone with the url. Any suggestions?
Should be:
var url = "http://storageName.blob.core.windows.net/containerName/file.json";
d3.json(url, function (json) {
//code here
});
Relevant for 2019:
d3.json("http://127.0.0.1:8080/mydata.json").then( data => {
console.log(data);
})
you'll have to set the Content-Type http header to "application/json" on your blob.
It can be done programmatically or using the rest API, or using a free utility like cloudberry explorer for azure blob storage.
For REST api use d3.request:
d3.fetch("api_url/path")
.header("Content-Type", "application/json")
.post(function(data) {
console.log(data);
})
Related
I am trying to accept the URL Encoded format in postman to post some data to the Vue JS app, I am using the below-encoded format, how can I achieve that which npm package should I use?
you can use axios
const axios = require('axios')
const params = new URLSearchParams()
params.append('name', 'Akexorcist')
params.append('age', '28')
params.append('position', 'Android Developer')
params.append('description', 'birthdate=25-12-1989&favourite=coding%20coding%20and%20coding&company=Nextzy%20Technologies&website=http://www.akexorcist.com/')
params.append('awesome', true)
const config = {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}
axios.post(url, params, config)
.then((result) => {
// Do somthing
})
.catch((err) => {
// Do somthing
})
x-www-form-urlencoded data is sent via HTTP headers
Most HTTP headers are not visible to your front-end JavaScript application. They are only visible to the server responding to the request. You cannot read them directly from JavaScript running in a web browser.
However, there are options...
Change the source; have the POST request changed to a GET and encode the parameters in the URL
A reverse proxy for your application could convert from POST parameters to GET parameters with some additional coding or configuration
Receive the request on your server and feed them into your Vue.js application; use something like php/asp/etc to serve your html instead of static HTML files and embed the posted parameters in the generated HTML page
There may be other options if you are creative, but the simplest is the first - just change the source so it no longer posts data.
I resolved it by adding middleware(server-side code such as .net web API) and then redirected it using query string)
This is part of the data I receive from Google's Calendar API:
{
"fileUrl":"https://drive.google.com/file/d/1q-cSkADjUnD0PGOamZKI44oIL_cXDJlg/view?usp=drive_web",
"title":"2.png",
"iconLink":"",
"fileId":"1q-cSkADjUnD0PGOamZKI44oIL_cXDJlg"
}
How do I achieve the direct link to the file (using JavaScript) so I can use it as datasource? example:
https://something.com/2.png
Edit: This link (right click & copy image adress) works as datasource, I just don't know how I would dynamically create it.
You need to make a GET request to fileUrl, since permanent "direct" links will not exist.
Directly from these google docs:
Using alt=media
To download files, you make an authorized HTTP GET request to the file's resource URL and include the query parameter alt=media. For example:
GET
https://www.googleapis.com/drive/v3/files/0B9jNhSvVjoIVM3dKcGRKRmVIOVU?alt=media
URLs do not need file extensions for their server to understand what it is you are requesting. However, sometimes servers want an extra query parameter to decide what to send back.
So it also seems you may need to append ?alt=media onto the end of your endpoint url, fileUrl.
Then just use ajax, or a similar requesting method, and send a GET request to the endpoint.
Using the Drive API and JS:
var fileId = '0BwwA4oUTeiV1UVNwOHItT0xfa2M';
var dest = fs.createWriteStream('/tmp/photo.jpg');
drive.files.get({
fileId: fileId,
alt: 'media'
})
.on('end', function () {
console.log('Done');
})
.on('error', function (err) {
console.log('Error during download', err);
})
.pipe(dest);
Hi I am developing web application in angularjs. I am developing file upload module. I have below array with file details.
//below code to get array of files
$scope.showPicker=function()
{
var client = filestack.init('AGeDIRvVZTRWgtmFbfGuZz');
client.pick({
}).then(function (result) {
arrMakes.push(result.filesUploaded);
});
}
In the above image i shown my array. I have three files.
Below is my angular code to send details to api.
var files = new FormData();
angular.forEach(arrMakes, function (value, index) {
console.log(value,index);
files.append(index, value);
files.append('data', angular.toJson(index).replace(/['"]+/g, ''));
});
return $http.post(this.uploadUrl, files, {
transformRequest: angular.identity,
headers: {
'Content-Type': undefined,
}
})
The problem is i am not receiving file in server side. Below line gives me 0 files in server.
System.Web.HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files;
May i know am i sending correct data to server? Can someone help me to fix this? Any help would be greatly appreciated. Thank you.
You are not uploading any files to the server, only strings.
You can't append objects to a FormData. appart from Blob & File objects See what will happen:
fd = new FormData
fd.append(2, {foo: 'bar'})
fd.append('data', 5)
new Response(fd).text().then(console.log)
// you get [object Object]
Why do you stringify the index in "data"? It will be casted to string automatically. And what is there that you have to replace?
If i where you i would just simple send the hole arrMakes to the server and download all the files from the url on the backend, otherwise the client has to download and then upload them to the server and wasting bandwidth and time.
beside, you don't need angulars forEach loop, arrays has that method built in
arrMakes.forEach(function (value, index) {
...
})
You won't even have to use any loop if you just pass the arrMarks to the server
So I have been supplied an URL for an "exposed JSON endpoint" similar to one found here-only difference is the functions are different. First of all what does this mean("exposed JSON endpoint") ? And how do I call this web service ? I have used web services like the Google Maps with C# where I would download and parse the XML from URL and use the data. But with this, I have no idea how to use the service. (any code in Javascript, C#, Java is fine). Thanks for any help !
An "exposed JSON endpoint" is a publicly available URL (sometimes with query or path parameters added by you) which you can send an HTTP request to and it will return JSON from the remote server that is related to the request you sent.
You then parse the returned JSON (into the structure of whatever programming language you are using) so you can then use the returned data in your own code.
Maybe you can try something like this:
WebClient client = new WebClient();
Stream stream = client.OpenRead("Endpoint");
StreamReader reader = new StreamReader(stream);
Newtonsoft.Json.Linq.JObject jObject = Newtonsoft.Json.Linq.JObject.Parse(reader.ReadLine());
As the service end point states:
You need to include the following element in your page
<script src="http://orc.csres.utexas.edu/orchard/json/compiler?js"/></script>
Then you call the service using something like this
try {
compilerService.compile(
{
devKey : "key",
program : "program"
},
function(returnValue) {
// it worked do something with returnValue
console.log(returnValue);
},
function(response, status, exception) {
// something went wrong
console.log(response);
console.log(status);
console.log(exception);
}
);
}
catch (e) {
console.log(e);
}
Im working in an application that uses java + spring on the server side aswell as extdirectspring. On the client side it uses extjs/javascript.
I want to poke a method on the serverside and retrieve a file from the database. If the file doesn't exist then I'd like to display an error in some way.
The attempt to retrieve the file and the check it exists need to happen in the same call - the file could be deleted in between calls.
The way I can see people have done it in the current application is using spring controllers + request mappings and a window.open("someUrl/filename.blah"); with the server returning the file from the mapped method.
This doesnt seem to let you handle the case where the file doesn't exist though.
Ideally I'd just like to send some json back from the server which has the file data (possibly null) and sucess/failure. When I get the response I can then either show some information about the failure or open the file. Unfortunately I can't observe the current failure mode because something somewhere is caching the files - if I delete them from the database then they appear to still exist and you can still download them!
By 'open' I mean show the standard 'what do you want to do with this file open/save' dialog. I'm not trying to parse the file or do anything with it - I just want to serve it up to the browser/user.
Is there a way to do that without using a url and window.open? Eg some method that takes a blob of data and a file name or similar?
Update
The transfer of the data/json isn't the problem I'm trying to solve.
As I'm using extdirect I'll probably just do it like this:
public class SomeClass
{
#ExtDirectMethod
public AFile getFile(Long id) throws Exception
{
//do stuff
}
}
Then on the clientside you just do:
someClass.getFile(id, function(file){
if(file.found){
SomeHowGiveThisToTheUser(file.name,file.data); ????
return;
}
ReportCouldntFind(file.name);
});
The bit I dont know how to do is the give the file to the user.
Further update
I dont think it's possible to do this without blob urls or data uri's. Both of these are mentioned in this post. I haven't tried them out as we are having to support a browser that is too old for both techniques.
You are wanting to do some standard Ajax (Assuming you have jQuery available).
Something like:
$.getJSON( url, function( data ) {
if (data.success){
} else {
}
});
And on the server side, add code to return the expected JSON.
In extJS:
Ext.Ajax.request({
url : url,
method: 'GET',
headers: { 'Content-Type': 'application/json' },
params : params,
success: function (response) {
var jsonResp = Ext.util.JSON.decode(response.responseText);
if (response.success){
// do success stuff, like using response.fileData
} else {
// do fail stuff
}
failure: function (response) {
var jsonResp = Ext.util.JSON.decode(response.responseText);
// etc.
});
On the server in a Java servlet you could something like this (assumes apache commons file util):
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
InputStream in = new URL( "http://remote.file.url" ).openStream();
IOUtils.copy(in, response.getOutputStream());
}
Probably a more spring specific way to do it, but that gives you an idea.
For your case, you want to wrap the file contents in a JSON object that includes the success proeprty. For that, use the Java JSON jar: http://json.org/java/
Update: Finally understand what you are asking.
It finally occurred to me that you are asking how to handle the actual download.
There's a couple ways these days.
Take a look at this SO answer, this is using an iFrame: Download File Using Javascript/jQuery
There are also several fancy downloader components, including several for jQuery.
So you would do a two part process: check for the file availability using a standard ajax call, and then if response.success, use the downloader to serve the file to the user.