How can I get json content in <script src="url.json"> - javascript

How can I get the content of url.json, and cast the json to a variable.
The content of url.json is pure json format.
Thanx

if you use jquery
<script type="text/javascript">
var json_variable;
$.getJSON('url.json', function(json){
json_variable = json;
});
</script>

Are you aware of the jquery getJSON api? You can use this to download json from an url. Not sure if you can embed some json directly in a script tag, though.

You need to read in the contents from the url using AJAX and then put that into your variable or use the data as soon as you successfully get the data.
See here for non jQuery vanilla javascript methods: reading server file with javascript
and also
Consuming JSON data without jQuery (sans getJSON)

Related

Use JSON from flask with jinja in javascript

I have the following issue:
I get from my mongodb an dict document, I parse it to json and pass it trough with jinja to my html page. I try to use this json document with the renderjson package. I have tried some solutions with quote the jinja object but it's working not properly.
<div id="test"></div>
<script type="text/javascript" src="static/renderjson.js"></script>
<script>
var str = "{{meta[1][0]}}" // meta is my list, the json object is the first element from flask
document.getElementById("test").appendChild(
renderjson(JSON.stringify(str))
);
</script>
The json is valid.
I am trying to use the renderjson package. https://github.com/caldwell/renderjson.
If I use instead stringfy the parse method, nothing is displayed.
How can I pass the json to the frontend properly?

How to access JSON file in JavaScript?

I have a JSON file as data.json and I have an HTML file with JavaScript embedded in it. I want to access data from the JSON file in a simple HTML(file:///C:/Users/XYZ/Desktop/htmlpage.html) file and NOT in a server-client manner(http://....). I have tried following simple code to import JSON file.
<!DOCTYPE html>
<html>
<body>
<p>Access an array value of a JSON object.</p>
<p id="demo"></p>
<script type="text/javascript" src="F:/Folder/data.json">
var myObj, x;
x = data[0].topic;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
I have read this method of using
<script type="text/javascript" src="F:/Folder/data.json">
on other StackOverflow Questions. But it is not working.
Please tell me the simplest way to access the data in the JSON file.
You could try writing something like this in your JSON file in order to assign the data to a variable:
window.data = JSON.parse('insert your json string here');
You can then access window.data in your page's javascript. You can also omit window. and just assign and/or read from data, which is the same as window.data.
Perhaps a cleaner approach would be to use an AJAX request either with jQuery or vanilla Javascript, both approaches have many answers available on this site.
You could also look into a solution with jQuery.getJSON(): Loading local JSON file
If you are able to use PHP for your desired task (accessing data from JSON file and doing some stuff with data) it will be easier to use PHP to open JSON files. You can use following code to access JSON files.
<?php
$str = file_get_contents('data.json');
$json = json_decode($str, true);
?>
Here $json will be the outermost object (if file starts with '{') / array (if file starts with '['). Then you can use it in a regular way.
Maybe some of you can think that why I'm posting PHP solution in Javascript question? But I found this very much easier than opening file in Javascript. So if you are allowed to use PHP go with that.

Get json of header included link

I like to localize a website using json. Want to include the files inside the html. How can i access the json object later in javascript ?
<link rel="localization" hreflang="en" href="lang/en.json" type="application/l10n+json"/>
I don't like to use the path string directly inside javascript. Will the link element loaded automatically ? Should i use a different header tag to declare the path to the json file. How can i access header tags ?
You can use an AJAX request if you have jQuery:
$.getJSON("lang/en.json", function(data) {
alert(data);
});
Without jQuery gets complicated: Consuming JSON data without jQuery (sans getJSON)

Reading contents from a JSON url and writing out those contents

I have a url [https://www.inquicker.com/facility/americas-family-doctors.json] that is a JSON data url. How can I access the contents of this url, and write out the values.
The format contains schedules as an array that inside it contains schedule_id, name, and available_times. I have tried various ways of getting the JSON file, but none have worked.
UPDATE:
Well I have got it this far with this code, and it's laying out what looks like objects from the array. So I believe I got the cross site issue under control. I just need to figure out how to access the data now.
<!DOCTYPE html>
<html>
<head>
<title>JQuery (cross-domain) JSONP</title>
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$.getJSON('https://www.inquicker.com/facility/americas-family-doctors.json',
function(data){
alert(data.facility);
$.each(data.schedules, function(i, name){
$('#names').append('<li>' + name.available_times[0] + '</li>');
});
});
});
</script>
</head>
<body>
<ul id="names"></ul>
</body>
</html>
Any help, or suggestions will be greatly appreciated, Thanks.
You cannot generally pass an Ajax request across domains. Normally a server will refuse any Ajax calls that don't come from the same source unless it is explicitly configured otherwise. I am guessing that you aren't calling from the same domain, given that you are using a fully-qualified URL. If you own the server, you will have to configure it to accept such calls from your other domain.
If this is not the case, launch the script in Firefox with Firebug running and look at the console output and tell me what error you get if any.
Once you manage to pass the JSON from your server back to the page, you will retrieve it in your JavaScript as a string. You then need to execute this function:
var jsonObject = JSON.parse(jsonString);
where jsonString is the string that you received from your server. jsonObject becomes an object representation of the JSON passed back to the answer that you can access using dot notation.
Try something like :
alert(json.facility);
There is no title json object in the url you have mentioned.
The JSON is already parsed when it comes to your function.
$.get('https://www.inquicker.com/facility/americas-family-doctors.json', function(result){
alert(result.facility); //Do whatever you want here
// result.schedules array is also ready
});

Retrieving JSON with JQuery

I'm trying to retrieve JSON with JQuery from: http://www.chirpradio.org/json
How do I retrieve, parse and display that JSON in a web page.
I'm new to JSON and JQuery, and the onsite documentation is a bit difficult to follow.
Thanks,
Moemonty
One way to get past the SOP is to use a proxy(which also converts it into JSONP). i.e.:
var url = "http://www.chirpradio.org/json";
jQuery.getJSON("http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%3D%22"+url+"%22&format=json&callback=?", function(data){
console.log(data.query.results.json);/*where yahoo puts the json object*/
});
However, I suggest not to query w/sensitive information(it's insecure). Your use with the radio feed is ok though.

Categories

Resources