API JSON Response to Text Field on Button Click Event

[Ben]

Hello this is another newbie question and I am sorry I am completetely new to Backendless just started today and I cant find YouTube videos or content in the Docs that helped figuring this out.

At my App with ID A64366E6-49A2-CBBC-FF22-93A591AEF200 I have one Button and one Textfield.
The Button has a on Click Event Logic which makes one API Call to Ninox API using the Network API and puts it in “Page Data” under the property “customers”.

The Textfield returns “Page Data” Content Logic name “customers”.
If I click on Preview the App crashes and doesnt show the button and textfield.
In the Browser Console it logs:

sdk.js:14 Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20{} for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at Rg (sdk.js:14:2265301)
at sdk.js:14:2270132
at fi (sdk.js:14:2281126)
at oo (sdk.js:14:2327078)
at bk (sdk.js:14:2312412)
at ak (sdk.js:14:2312340)
at Tj (sdk.js:14:2312203)
at Lj (sdk.js:14:2309176)
at sdk.js:14:2258980
at r.unstable_runWithPriority (sdk.js:14:2363005)

I know that the API Call is correct because it worked when I saved it to localStorage.

I Attached some screenshots, maybe this helpes to clearify.

[mark-piller]

Hi Ben,

Welcome to the Backendless community! What does the API response from Ninox look like? I assume it would be some sort of JSON object. When you bind your TextField to “customers”, did you expect it to display the entire JSON response?

Regards,
Mark

[Ben]

Yes it is an array of Objects [{“id”:1,“fields”:{“name”:“Arthur Dent”,“customerNumber”:42}}].
Even when I use convertToText on the HTTP Block it doesnt work.
I know I will need to iterate over this array somehow but atm I would be ok if it would just render the json as text on that field…

[mark-piller]

When you place an object (or an array) into the data model (Page Data in your case), the system will treat it structurally. It means that when binding a TextField to customers, the system will look for a string value in that mapping. Try changing the Content Logic so it returns a string value of the customers property from Page Data. Let me know if you run into a problem with it, it should be a quick change we can help with.

Mark

[Ben]

Sorry I don’t get it. Can you build a example for me where I can abstract how to do this? I build a new App for training purposes. App ID: 211FD47F-A2A2-1C54-FFA5-8EB9BCF11800
It calls the jokes API JokeAPI - Documentation which delivers jokes in json format.
I want to list every joke in a textfield.

Second question: I build a custom Component that can render the JSON on the screen:

export default function ListJsonList({ component, eventHandlers, appData, pageData, parentDataModel }) {
  const customers = pageData.customers;
  return <p>{JSON.stringify(customers)}</p>
}

This works.

But as soon as I try to render the list like:

  const renderedList = customers.map(( el, i ) => {
    return <p key={i}>{el.id}</p>
  })

and try to return that rendered list the App doesnt work anymore…

Why is that? Are there logs for this somewhere? What is a good way to start learning Backendless as a react developer?

Ben

[mark-piller]

Hi Ben,

Regarding text rendering from the API. I made a change in your data binding - deleted the empty Logic for the “Content Logic” handler. Now it uses basic data binding and the page works as expected. Please give it a try.

As for the second problem, please open a separate topic on this forum. We ask that there is a separate topic for each problem. It helps to stay focused on one problem at a time.

Regards,
Mark