From JSON to display on MM

[lkthomas]

I am very new to building my own module, I have a special bus ETA data which, I want to display it on MM; Here are the specs,

1. JSON is downloaded from a fixed URL
2. refresh data every 30 seconds
3. display module on specific period (e.g in the morning)
4. data_timestamp need to filter and get the closest time in relative to current time (You will see what I mean from the JSON sample below)

Question:

1. which module should I use as an example for JSON iteration?
2. How could I filter the closest timestamp with current time then display it in minute on MM?

Remark: Sample code doesn’t always come back with 3 sub-section

Sample code:
{
“type”: “ETA”,
“version”: “1.1”,
“generated_timestamp”: “2023-01-12T10:44:01+08:00”,
“data”: [
{
“co”: “NWFB”,
“route”: “26”,
“dir”: “O”,
“seq”: 20,
“stop”: “002759”,
“dest_tc”: “勵德邨”,
“dest_en”: “Lai Tak Tsuen”,
“eta”: “2023-01-12T10:53:43+08:00”,
“rmk_tc”: “”,
“eta_seq”: 1,
“dest_sc”: “励德邨”,
“rmk_en”: “”,
“rmk_sc”: “”,
“data_timestamp”: “2023-01-12T10:43:03+08:00”
},
{
“co”: “NWFB”,
“route”: “26”,
“dir”: “O”,
“seq”: 20,
“stop”: “002759”,
“dest_tc”: “勵德邨”,
“dest_en”: “Lai Tak Tsuen”,
“eta”: “2023-01-12T11:08:56+08:00”,
“rmk_tc”: “”,
“eta_seq”: 2,
“dest_sc”: “励德邨”,
“rmk_en”: “”,
“rmk_sc”: “”,
“data_timestamp”: “2023-01-12T10:43:03+08:00”
},
{
“co”: “NWFB”,
“route”: “26”,
“dir”: “O”,
“seq”: 20,
“stop”: “002759”,
“dest_tc”: “勵德邨”,
“dest_en”: “Lai Tak Tsuen”,
“eta”: “2023-01-12T11:29:05+08:00”,
“rmk_tc”: “”,
“eta_seq”: 3,
“dest_sc”: “励德邨”,
“rmk_en”: “”,
“rmk_sc”: “”,
“data_timestamp”: “2023-01-12T10:43:03+08:00”
}
]
}

[sdetweil]

@lkthomas said in From JSON to display on MM:

which module should I use as an example for JSON iteration?
How could I filter the closest timestamp with current time then display it in minute on MM?

2. there is an array filter function

you pass in the array, the logic looks at each element one by one… true means keep it in the results, false say don’t keep it.

the resulting array is the good subset of the total

javascript and json are very close friends.
url get request can return a javascript object of the json text …

then u can pass the array part (data I think from your sample) to the filter…
if you use fetch , you can do this in the browser side of the module,
otherwise have to use a helper…
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

fetch('http://example.com/movies.json')
  .then((response) => response.json())
  .then((data) => console.log(data));
data is now a js object of the json text

see my sample module for building a starter…
https://github.com/sdetweil/SampleModule

the browserside of the module (I call it modulename.js, cause its name MUST match the name of the module, and it has to be in a folder called the exact same) creates a small segment of html content
(either text or actual DOM nodes) … and gives that to MM when requested (the getDom() function) and MM will put the content where u configured the module to have its content shown.

so folder, modulename.js and modulename all match

if you do the fetch on a timed cycle, once u have the data, call updateDom() to inform mm your module has new content, then mm will call your getDom() to get the new content.

getDom() either creates the content or knows where the previously created content is.