How to use json-server remotely - javascript

I need to use https://github.com/typicode/json-server/ on github pages where I have json file. I need to call json file in my project and apply filter and sort , search, paginate etc. So I need get request only from this api. But json server used usually in local. How to use it remotely? Or any other easy method available?
Or how to use <script src="https://cdn.jsdelivr.net/npm/json-server#0.17.1/lib/server/index.min.js"></script> on static site?

Related

How can I create a different URL for every new Object

I have built this site "https://supsurvey.herokuapp.com/SurveyCreate.html"
You create a survey and then it redirects you to a unique URL
https://supsurvey.herokuapp.com/SurveyPage.html#718807c9-3a5b-4745-b953-511afef5e073
In the surveyCreate page I have location.assign (SurveyPage.html#${survey.id}) which is linked to SurveyPage.js and from there I extract the uuid4 using currentUrl.split (#) and then I send a get request to my server which is built in NODE-JavaScript (only for strong survey objects in MongoDB) for the correct survey OBJECT and display it to the user.
I want so so that after you press create Survey you will be redirected to
https://supsurvey.herokuapp.com/SurveyPage/718807c9-3a5b-4745-b953-511afef5e073
So instead of .html#{uuid} to /{uuid}
How do I do that?
I have tried changing to location.assign (SurveyPage/${survey.id})
but it fail because it doesn't find the file without the .html extension
I also tried location.assign (SurveyPage.html/${survey.id}) which also doesn't work.
since you are using NODE for backend - you can build your app using express
https://expressjs.com/en/api.html#req.baseUrl
allows for api like route rewriting to accomplish what you want
can also be done using the more robust Hapi server
https://hapi.dev/
can be done on any language really
slimphp works great for php apps
http://www.slimframework.com/

how to get local file with Restangular.service when a base url is not localhost?

I need to get a json file which is on my local machine, but my baseUrl in Restangular is not localhost...
So, here is the question:
Is it possible to get local file with Restangular.service when a base url is not localhost ?
And how can I do that?
See this post : Local file access with javascript
It is not a problem with Restangular but with Javascript.
If you need it for test purpose you can try to find a way to do it (see the post)
If you are doing this in production, it is a bad practice. You should not access local machine from front-end
Rather than using Restangular for this instance, I would just use a simple $http.get() operation.

How do I update/add to a JSON file using angularJS?

I've created a local JSON file and am able to get data from the file using
app.controller('appCtrl', function($scope, $http){
$http.get('employees.json').success(function(data){
$scope.employees=angular.fromJson(data.employees);
console.log($scope.employees);
}); //this is where the data from the json file is taken and stored into $scope.employees. works fine
}
I've been trying to write an equivalent http POST call by doing a $scope.employees.push, but it is only (understandably) updating the value of the local variable.
How do I update or add values to the original employees.json file?
I don't think it's possible to do that directly from Angular. There are some other sources that you integrate into your app, which you can then have Angular leverage.
Exploring the FileSystem API (HTML5) - verify which browsers
support this.
Another options is jQuery.twFile.
You could also just store it as localstorage and access it as you would just about any other object. This would be the method that I'd lean towards more (depending on the size). Otherwise I've always had to have the server-side do it.

Does d3.json() support authentication? If not, what other JavaScript options are available for JSON retrieval?

I am developing an application that needs to gather information from GitHub, so I began looking at their API. My initial thought was to use the d3.json() function to get the data (because it's simple and has done good things for me in the past), but there doesn't appear to be a way for me to authenticate with that function. For example, $ curl -u "username" https://api.github.com is given as an example of basic authentication (from GitHub API--obviously they use curl for their examples).
So, is there a way to do authentication with the d3.json() function? And if not, what are my other options to get the JSON with JavaScript?
Thanks!
Edit:
I'm experimenting now with using jQuery's getJSON method as shown here, because I started getting the error "XMLHttpRequest cannot load url Origin url is not allowed by Access-Control-Allow-Origin." Of course, the switch doesn't help with the ability to authenticate, but I can at least get the public data (which is most).
Edit #2:
Has anyone experimented with michael/github or fitzgen/github-api? I'm going to start looking into those.
If you have a PHP script which echos JSON, you can do all authentication server-side. Note that you can also send a GET request to your PHP script, so the way you call your script can be dynamic.

How can I retrieve data from an external XML file and place it in an HTML file?

I am trying to retrieve data from an XML file that is not located on my site's server, and then use that data fro various things, such as charts. Here is one example: http://forecast.weather.gov/MapClick.php?lat=40.78158&lon=-73.96648&FcstType=dwml. This is an XML file with the weather data for central park. I want to retrieve the data that is in the <value>tag, which is in the <pressure> tag, so I can create a graph with barometric pressure. I would prefer to do this with JavaScript, but I don't think it's possible to do so when the file isn't on my server.
Note: I do not want a different solution to retrieve the pressure data from somewhere else, because I want to retrieve other pieces of data from other XML files as well.
There's an interesting article about using Yahoo! Pipes to transform Xml weather data to JSON and use the result in a web page without need for any server side stuff (PHP, curl, etc.).
EDIT
Being new to jQuery myself, I a had to dig a little more to find out that (almost) everything described in the first article can be condensed down to
$.getJSON("<your Yahoo pipes url here>&_callback=?", function (data) {
alert(data.value.items[0].data[0].parameters.wordedForecast.text[0]);
});
using jQuerys builtin JSONP.
Pitfall!
Beware that Yahoo expects the callback url param to be named _callback
Nice summary on Cross-domain communications with JSONP which helped a lot to come up with this answer.
If your javascript code is on a server (as opposed to a mobile device), have PHP code load the xml, escape it and insert it into the HTML page. Then you just have to grab that in your code and process it with DOMParser.
You could use curl to pull the data to your server and act on it from there.
curl -o data.txt "http://forecast.weather.gov/MapClick.php?lat=40.78158&lon=-73.96648&FcstType=dwml"
This will give you the information in a file called data.txt. You could then either parse it server side and then just give the bits of data needed, or make the whole file available to your client, since they are both now in the same domain.

Categories