Inspector to browser json data in HTTP vals
Live example: https://stevekrouse-weatherdescription.web.val.run/
Installation
Create valimport { fetch } from "https://esm.town/v/std/fetch";
import { json_viewer } from "https://esm.town/v/stevekrouse/json_viewer";
export const weatherDescription = async (params: string[]): Promise<unknown> => {
let data = await fetch(`https://wttr.in/${params["city"]}?format=j1`);
let jsonData = await data.json();
return json_viewer(jsonData);
};
https://val.town/v/stevekrouse/weatherDescription
Thanks @mmcgrana (https://markmcgranaghan.com/) for the idea!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { html } from "https://esm.town/v/stevekrouse/html";
import { accepts } from "https://esm.town/v/vladimyr/accepts";
export const json_viewer = (req: Request, data) => {
const accept = accepts(req);
if (!accept.type("html")) {
return Response.json(data);
}
return html(`<!DOCTYPE html>
<html lang="en">
<body>
<div id="json-viewer"></div>
<script src="https://cdn.jsdelivr.net/npm/@textea/json-viewer@3"></script>
<script>
new JsonViewer({
value: ${JSON.stringify(data)}
}).render('#json-viewer')
</script>
</body>
</html>`);
};