Help on api/ real time data display

[meimei]

Fill this out this info to make it easier for the community to help you! If you don’t fill out this information, your post may be deleted or removed.

What Wick Editor Version are you using?
1.19.3

Describe the Problem
What issues are you having in the Wick Editor?
I am trying to apply api/ json into my wick project. Details can be seen here https://aqicn.org/json-api/demo/waqi-api-demo.js

What have you tried so far?
Have you attempted anything et to fix the problem? Let us know!
I tried to paste the demo script into the editor but it does not work.

My goal is to display real time data on my project. Most of the tutorials online are in python, is it possible to integrate them into wick?

[Steven]

date and time v62-2-2021_12-29-47.wick (118.2 KB)

I made this a long time ago!

Is this what you wanted?

(nvm i didnt read the whole thing lol)

[blurredPixels]

I’m not sure how your demo.api works but you can read external json data and make your methods to represent real time data in wickeditor

search the forum for “json” you’ll find some result

here is one

How do I open a json file?

I tried the following but it didn’t work (console value was empty). What is the best way to load json data into the project? Many thanks. let httpRequest = new XMLHttpRequest(); // asynchronous request httpRequest.open("GET", "c:/test.json", true); httpRequest.send(); httpRequest.addEventListener("readystatechange", project.data = function() { if (this.readyState === this.DONE) { // when the request has completed return JSON.parse(this.response); } }); console.log(pro…

[Hamzah_Alani]

@Revon also created a tutorial that might help:

@Revon

To import a JS Plugins you’d need this code:

Import Code

function loadScript(url)
{
    // Adding the script tag to the head as suggested before
    var head = document.head;
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    // Fire the loading
    head.appendChild(script);
}

onEvent('load', function () {
  loadScript("SCRIPT URL");
});

From THIS Stack Overflow question

To run the function of the imported script use:
window.function_name()
NOTE: After importing, and if the imported function is on the same scope and time as the loadScript call… please put a delay on it; importing takes time (like the example below). And internet is required.

Sweet Alert Plugin Example File:
Sweet Alert JS Example3-9-2020_4-58-59PM.wick (1.4 KB)
Tested on wick editor 1.16.2, 1.17, and itch.io

[blurredPixels]

@Revon

NOTE: After importing, and if the imported function is on the same scope and time as the loadScript call… please put a delay on it; importing takes time (like the example below)

It could be useful putting in the imported script a variable and check his existence in wickeditor before calling the imported methods

[meimei]

Thank you for all your help.
But I am still struggling on how to extract the data from the script URL and then show it on the Wick.
For example, how do I show the extract the data pm 2.5 value from this link
[https://api.waqi.info/feed/beijing/?token=demo]

[blurredPixels]

do you see that token=demo at the end of your link?
that seems to suggest that the reading of the json is not free from outside the site (except the demo and maybe some payed services)

[meimei]

I got the token

This is what i tried

var xmlhttp = new XMLHttpRequest();
var url = "http://api.waqi.info/feed/hongkong/?token=demo;

xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myArr = JSON.parse(this.responseText);

alert(this.responseText);

myFunction(myArr);

}
};
xmlhttp.open(“GET”, url, true);
xmlhttp.send();

function myFunction(arr) {
document.getElementById(“id01”).innerHTML = arr.status +" "+ arr.data.iaqi.pm25.v;
}

When I open the html file, it will pop up an alert of the responseText. But I could not show the data on the text even if I added a text.setText(data)

[blurredPixels]

If the json loaded and it is correctly parsed myArr should be an object (myArr?) containing all data.
what if you write?:
text.setText(myArr.data.city.name)

you should have
HongKong (香港)

[meimei]

Thank you. It works fine now.
Another problem is that
I worked perfectly on the wick editor, but all the interaction is gone after exporting to html.
Did anyone face this problem before?

[blurredPixels]

where is the html you produced? you have on your local machine or on a server?
this could be the problem