use JSON api for live news - json

I have this Fox Sport API url :
https://newsapi.org/v1/articles?source=fox-sports&sortBy=top&apiKey=955acf3993df49169dfa33dce76d015f
How do i use this? I know it's based on Json. But where do i put this URL? in what format or file? Can someone please help me?
I alrady tried putting it between scripts tags in my index.php file but no results...
Thank you!

Google it ---> Php curl. Read the doc!
If you are using a framework, let us know which one😃

JSON is simply a useful way to send and receive strings that represent objects in JavaScript. In these days I'm working on an application that uses JSON strings to store and retrieve data, and I found a very simple way to get data from JSON strings, that is jQuery. This library has a jQuery.getJSON() method, which let you to load JSON-encoded data from the server (or locally) using a GET HTTP request. Here you can find all the details you need to use this method.
Obviously you could choose not to use any third-part library and do what you need in vanilla JavaScript, but jQuery is very useful since it helps to avoid common cross-browser issues.
In my application I store data from a JSON string in this way:
var placesList;
jQuery.getJSON("places.txt").done(function (data) {
placesList = data;
});
that is using an external variable to store them using an anonymous function. As you can see, my URL here is places.txt, but you can use any valid URL you want that provide a JSON string.

You should try like this -
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var url = 'https://newsapi.org/v1/articles?source=fox-sports&sortBy=top&apiKey=955acf3993df49169dfa33dce76d015f';
$.getJSON(url).then(function(res){
console.log(res) //{status: "ok", source: "fox-sports", sortBy: "top", articles: Array[10]}
console.log(res['status']) //ok
console.log(res['source']) //fox-sports
console.log(res['sortBy']) //top
console.log(res['articles'].length) //10
})
})
</script>

Related

View RawBody In SailsJS

I'd like to dump out, via sails.log.debug(), the raw POSTed data as seen by a controller function. I am dealing with JSON coming from a third-party that may be badly formatted and need to figure out where/how. I'd like to see the whole, raw dump.
create: function(req, res) {
sails.log.debug(???);
//var ticket = JSON.parse(req.param("webhook"));
return res.echoRequest(true);
}
You will need to use middleware to get the "RAW" body. You will want to grab that pre-sails
Check out answer to this question Node.js - get raw request body using Express
You could use:
var packet = req.params.all();
sails.log.debug(packet);
Hope that helps.

Pass Json Object from Play! framework to HighCharts JS

http://www.playframework.com/documentation/2.1.x/JavaTodoList
Using the above tutorial as a reference, I have created an application which sends data from the model to view via the Application controller.
I have managed to display the model(Tasks) as a high chart. The code is here.
public static Result format(){
return ok(views.html.frmt.render("Visualize it",Task.all()));
}
This goes to this view page.
http://ideone.com/ycz9ko
Currently, I use scala templating inside the javascript code itself. Refer to lines 9-14 and lines 20-24.This unelegant style of doing things is not really optimal.
I want to be able to accomplish the above using Json instead.
public static Result jsonIt(){
List<Task> tasks = Task.all();
return ok(Json.toJson(tasks));
}
My Qns are how to send the JSON objects to a view template.
And how to parse it into a Highcharts format. Is there some standard procedure to do this ? Or else I have to write my own method to do this ?
It'll great if someone can show me a code snippet. Also I would prefer a post not using Ajax. I would just want to know how to do this first.
I also found this stackoverflow post useful.how to parse json into highcharts. However, it didnt answer the part about converting from Play format to Highcharts format.
Thanks in advance
You don't need to pass a json object to your template, instead you might do an ajax call from your client side javascript (your template) and get json response that you could use futher in javascript code to build a chart. For example :
You have some path that is bind to your controller jsonIt() like so /chartsdata/json
then using jquery shorthand for ajax request:
var chart_data = $.get('/chartsdata/json', function(data) {
return data;
});
now you can use a chart_data that is an array of objects where each object represents a Task, in your further javascript code to build a chart.

Mysql ,JSP ,Google Maps

I have explored some of the interesting Google Maps Tutorials.I am interested to show Info Window and Markers on custom Google Map on my application.Where i want to get data for info Window and markers from MySQL and instead of using php i want to use JSP.
I have searched a lot on Google.I did not find any particular solution for this.Can anyone help me or give me hint on how i should go for it? Or Do I have to learn php now? Because i am good in JSP.
Any help would be more appreciable.
Thanks in advance.
I am glad to answer my own question which was posted on stack overflow approximately 7-8 months back.
Question :- I wanted to display google map and some google map features in jsp (Not in PHP). Features such as InfoWindow etc.
Problem :- All GoogleMap feature logic was present in JavaScript. So I wanted to get my business data(which might contain some lat and longs) from mysql db inside javascript and show that data inside infowindow or use that data to put some markers on google maps etc. All this I wanted to do inside JSP's javascript.
Solution :- There are 2 solutions I found out
1) Use servlet which will return you data which you need in json format and call that servlet url inside javascript using ajax calls.
2) Use Spring MVC. Spring MVC return json object with #ResponseBody annotation specified inside your controller's method and you just have to call that url in same way as we will call servlet inside javascript using ajax call.
sample Ajax function :-
$.ajax({
type: "post",
url: "/ServletReturnJson/JsonServlet",//URL to your servlet
dataType: 'json'
success:function(msg) {
var m=msg;
var json = m ,
obj = JSON.parse(json);
for(var i=0;i<obj.length;i++){
//Iterate your data
}
});
Note :- Above is just sample. You can try with your own classes and use above sample as guideline.
My suggestion would be to read and understand this tutorial. Implement the concept using JSP rather than PHP.

Showing JSON in html with javascript

i am new with JSON. I am using a api which using JSON for response. I am calling the api url by simple xhr method. The code is working and i am getting 200 status but
how do i able to retrieve the JSON in the html?
I was able to show the JSON by printing xhr.responseText in innerHTML. But i need to show the data so i can use them in html.
Can you suggest how i can present the data in html when i have the json data in xhr.responseText.
Please let me know if you need more info.
Can anyone guide me how to do it via jquery also?
If you add JSON2.js (from https://github.com/douglascrockford/JSON-js/blob/master/json2.js) to your page, then you can parse the JSON into a JavaScript object by using:
var parsedData = JSON.parse(xhr.responseText);
If you completely trust your JSON source, you can also do it very quickly and without using JSON2.js by simply evaling it thus:
var parsedData = eval('(' + xhr.responseText + ')');
but this will run any code embedded in the response and so isn't secure and generally wouldn't be recommended.
here is another post which works and less code because of jquery. The first answer works perfectly. I thought this might be help for people who having same problem.
Trying to use jQuery to display JSON text data

How do I process Proxy Digg JSON for use with jQuery?

I'm trying to deal with: "Requests made from Javascript running on your web pages must be proxied to avoid same-origin policy conflicts."
I know how to work with the JSON once I've got it. But aside from copy-pasting the JSON results via my browser, I don't know how to localize it for use.
Did you tried
$.getJSON('url', function(data){
//do smth with data
})
?
After the request is complete, data will be an object with all JSON response and you can access it as regular js object: data.something and so on.