How to look up a value in Json and use it to set a buttons text

Wappler General Need Help
1

I have the following JSON

    {
             "books" : 
             [
             {"bookid":"b1", "title":"The Lion, The Witch and The Wardrobe"},
             {"bookid":"b2", "title":"Lord of the Rings"},
             {"bookid":"b3", "title":"Aesops Fables"}
             ]
    }

I have 3 buttons set up on different parts of a page.
I want to be able to assign a bookid to the buttons and depending on the bookid the button text should be the corresponding title from the json file.

Should i make the Button Properties ID to say “b2”. Then use that to set Dynamic Attribute Inner Text of Button after looking up the corresponding title in the json file. But i don’t know what the expression should be.

Is this even the right way workflow?

2

Are these buttons adding statically on the page, or do you want to add them dynamically (jn a repeat) on the page, using the json as a source?

3

I want to add them statically because they are on different parts of the page , the positioning flexibility of statically adding them is important to me

4

Where is the json coming from? Is it a json file in your site root?

5

I have added the json file to the assets folder

6

I want to store it in a place where all pages can access it easily , hope assets folder is the way to go

7

Then use the JSON Data Source component in App Connect to create a data source out of it. When you do this the data will be available in the dynamic attributes picker.

8

image
image469Ă—777 21.8 KB

I can see the books object but how to write that inner text of button 1 = jsonDS 1.books.id[b2].title?

9

I mean how should i write an expression that looks up the id of button , then looks up the json to find the book with the same id and then retrieves the title of the book ? I don’t know the syntax

10

That’s a bit complex to achieve the way you are trying to do it.
You can’t get the ID of the button when filtering the data source, but you can get its value. You can add value="b1" to your button with id="b1" and use this value to identify the button and filter the data source.
Your inner text code will then look like:

dmx-text="jsonDS1.data.books.where(`bookid`, value, '==')[0].title"
1 Like
11

It worked thanks so much

12

Another option is if you know that b1 will always be in the first place in the json, b2 in the second etc. you can directly call it like:

Button1:

dmx-text="jsonDS1.data.books[0].title"

Button2:

dmx-text="jsonDS1.data.books[1].title"

etc

13

No i can’t rely on the order but your solution of value works perfectly

14

Edited to add that it is working perfectly

15

Are you sure you entered proper values for each buttons, and not b1 for all?

16

It’s working now without changing anything . I had forgotten to save the page