Is there any extension to display a json or a dictionary in a read-only tree view?

General Discussion
1

Hi there,

Is there any extension to display a json or a dictionary in a read-only tree view?
I just need to display it and allow the user to explore it.

Thanks in advance,
Osmany

2

Hi, can you give an example of how the user would be able to explore it?
Do you want to display the JSON/Dictionary in a beautified and organized manner?

3

Hi @Kumaraswamy

I mean in a hierarchical manner, collapsing and expanding nodes, going down into lower levels, etc.

Greetings,
Osmany

4
1 Like
5

Hi @ABG,

Initially it could work, but I need to provide navigation options. The dictionary to be displayed has some nodes that are extensive and I must allow the user to collapse them in order to view multiple summary data at a glance.

I'm reviewing some json viewers online to get some ideas, maybe I can view it in WebViewer. Would that be possible?

Best regards,
Osmany

6

This is as far as I have gotten on this problem.

I don't have a complete solution yet.

Search the board for FAQ JavaScript Stunts for how to package any web based solutions you find

7

This looks like it can work OK in a webviewer:

2 Likes
8

Thanks @TIMAI2,

I´m working on it.
It is neccesary write a html doc that import this library and receive the generated JSON through the parameter WebViwerString.

I will let you know the result.
Greetings,
Osmany

9

Hi @TIMAI2,

And, voilà,

imagen
imagen471×619 48.4 KB

imagen
imagen922×345 23.4 KB

<!doctype html>
<head>
<title>Score datasheet</title>
</head>

<body onload="processAppInventorInput();">
<b>Score sheet</b>
<div class="scoresheet"></div>
<script type="text/javascript" src="jsonview.js"></script>
<script type="text/javascript">
    var appInventorInput = window.AppInventor.getWebViewString();
    function processAppInventorInput() {
        const tree = jsonview.create(appInventorInput);
        jsonview.render(tree, document.querySelector('.scoresheet'));
        jsonview.expand(tree);
    }
</script>

</body>
</html>

I thank you again,
Best regards,
Osmany

4 Likes
10

Could you also post the sample .aia file, with required Media folder contents?

11

Sure @ABG,

Here you are.
webjson.aia (5.8 KB)

Greetings,
Osmany

1 Like
12

Also, the basics

jsonTreeView.aia (6.0 KB)

1 Like
13

(added to FAQ)

1 Like
14

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.