Get Json Data from External Url and Display It in a Div as Plain Text

Get JSON data from external URL and display it in a div as plain text

You can do this with JSONP like this:

function insertReply(content) {
    document.getElementById('output').innerHTML = content;
}

// create script element
var script = document.createElement('script');
// assing src with callback name
script.src = 'http://url.to.json?callback=insertReply';
// insert script to document and load content
document.body.appendChild(script);

But source must be aware that you want it to call function passed as callback parameter to it.

With google API it would look like this:

function insertReply(content) {
    document.getElementById('output').innerHTML = content;
}

// create script element
var script = document.createElement('script');
// assing src with callback name
script.src = 'https://www.googleapis.com/freebase/v1/text/en/bob_dylan?callback=insertReply';
// insert script to document and load content
document.body.appendChild(script);

Check how data looks like when you pass callback to google api:
https://www.googleapis.com/freebase/v1/text/en/bob_dylan?callback=insertReply

Here is quite good explanation of JSONP: http://en.wikipedia.org/wiki/JSONP

Get JSON with nested data from external URL and display it in a div as plain text

You cannot print an object as text in JavaScript. However, you convert the object to string and append it to the DOM. Instead of result.innerText = data.queries try result.innerText = JSON.stringify(data.queries). Do note the output string won't be formatted.

How to use AngularJS to get JSON from external URL and display in page - Resource interpreted as Script but transferred with MIME type text/html

After doing some more research and experimenting with different methods, I regret to inform you that what you're trying to achieve cannot be done.

I sent a GET request to https://btc-e.com/api/2/btc_usd/ticker?callback=JSON_CALLBACK for testing purposes and in the response headers it says

content-type → text/html; charset=utf-8

Because you do cross domain calls and you have no access to the server, you have to use jsonp. But jsonp does not work with text/html content. This related to the error

Resource interpreted as Script but transferred with MIME type text/html

So even though the response looks like valid JSON, it is not treated as such by your client application.

To solve this you would have to add the proper Content-Type header on the server, but you have no access to it.

Quote from this related question:

jsonp can only be used if and when the server properly embed the response in a javascript function call.

---

To sum it up:

You should either

• allow cross domain calls by configuring the server to do so
• send back the proper content-type header by configuring the server to do so

Sadly you have no access to the server.

Be aware that this is not your fault. It is because the server is not configured properly.

Cycle page URLs by appending json value to URL and refresh on interval

If it's logging out the correct value, which it looks like it should be, then all you are missing is changing the actual URL of your window:

window.location.href = getNextUrl();

Keep in mind that you haven't implemented your delay yet so this would currently keep refreshing to the next page without any delay.

Update to answer comment question:

To be able to update the url only after the obj.duration, you could do the following for your getNextURL function:

// encode your php array to json
let obj = <?php echo json_encode($showDisplays); ?>;

let params = new URL(document.location).searchParams;
params.set("pageID", obj.pageID);
params.set("display", obj.display_id);

let url = window.location.href.split('?')[0];
let nextURL = url + "?" + params.toString();
window.setTimeout(function () {
    window.location.href = nextURL;
}, obj.duration * 1000);

In the above code, I have assumed that your durations are in seconds however window.setTimeout works with milliseconds thus the * 1000.

What this will do is after it creates the next URL, it will wait for obj.duration number of seconds before assigning the next URL to be the current url.

How to display a single json data which received as a http response from nodejs in service using angular?

JSON is not correct. It should be

 data =  [{ Key : 122,Record : { Id : 111,Name:"aa"}}];

If it is a JSON string

[{"Key":122,"Record":{"Id":111,"Name":"aa"}}]

This needs to be converted to JSON using JSON.parse() method.

To access Id

<div class="form-group"   *ngIf="data">
   <input type ="text" [value] =  "data[0].Record.Id">
   </div>

Check working code https://stackblitz.com/edit/angular-aerk1f?file=src%2Fapp%2Fapp.component.html

How to read an external local JSON file in JavaScript?

You cannot make a AJAX call to a local resource as the request is made using HTTP.

A workaround is to run a local webserver, serve up the file and make the AJAX call to localhost.

In terms of helping you write code to read JSON, you should read the documentation for jQuery.getJSON():

http://api.jquery.com/jQuery.getJSON/

---

Related Topics