Nested Api Data

Wappler General Need Help
1

How can I fetch data from a deeply nested API and display it in a table? When I try to create the table, the values from the nested structure are not being picked up. How can I resolve this issue?

{
  "groupA": {
    "person1": {
      "firstName": "Gwen",
      "lastName": "Ten"
    },
    "person2": {
      "firstName": "Shawn",
      "lastName": "Paul"
    }
  },
  "groupB": {
    "person1": {
      "firstName": "Randy",
      "lastName": "Orton"
    },
    "person2": {
      "firstName": "Ender",
      "lastName": "Paul"
    }
  }
}

it would get the key but not the value how to get this done

2

have you added the schema to the API in server connect?

3

i've defined schema as well
i've Tested with a test api
https://jsonplaceholder.typicode.com/posts
it is working fine but problem is that api is nested which i've mentioned above it will get the key thing in header not the value

image
image1324×144 2.25 KB

this the nested api of mine
image
image1313×434 20.7 KB

and this is working one which was fake api which i tested

now how to get it fixed

4

Have you looked at the returned results in the browser console using dmx.app.data you can see how wappler sees the data being returned there?

Also sometimes the data isn't being returned exactly like you might think I will send the data to a webhook to see whats actually being returned there. https://webhook.site/

take a look at what its returning in the dmx.app.data and post that?

5

Looks like you have nested objects there.

I assume you have tried something like.
GroupA.person1.firstName etc

6

image
image1919×868 69.7 KB

yes api is fetching the data but its nested so it won't display the selected schema , still figuring out how to deal with it

7
  1. Can you show the HTML code of your table/dmx-repeat?
  2. Can you show an example of what you want the table to look like? It's not entirely clear from your posts. Also, supply the example JSON for that particular example so that we can try to see how to make it work to look like the intended table example
8

1 .

image
image956×788 40 KB

2.it should display like this in the table
image
image1469×86 6.09 KB

and last this is the exact response which is nested
{
"borrower": {
"fa0002": {
"first_name": "test",
"last_name": "borrower",
"nickname": "borrower past due test loan",
"role": "borrower",
"coming_up": {
"balance": "5338.74",
"due_date": "05/01/2025",
"amount_due": "456.85"
},
"loan_state": {
"total_due": "1727.40",
"schedule_date": "03/01/2025",
"loan_amount_paid": "Y",
"loan_schedule_date": "04/15/2024",
"due_history": [
{
"schedule_date": "03/01/2025",
"interest": "36.51",
"principal": "420.34",
"due_amount": "456.85"
},
{
"schedule_date": "02/01/2025",
"interest": "43.23",
"principal": "413.62",
"due_amount": "456.85"
},
{
"schedule_date": "01/01/2025",
"interest": "46.03",
"principal": "410.82",
"due_amount": "456.85"
},
{
"schedule_date": "12/01/2024",
"interest": "47.23",
"principal": "409.62",
"due_amount": "356.85"
}
]
},
"loan_details": {
"loan_amount": "10000.00",
"interest_rate": "8.00",
"contract_date": "04/03/2024",
"end_date": "03/01/2026",
"status": "Past Due",
"score": "A"
},
"paymentBreakdown": {
"onTimePayments": 0,
"prePayments": 0,
"latePayments": 0
},
"recentPayments": [
{
"scheduledDate": "12/01/2024",
"scheduledPaidAmount": "456.85",
"actualDate": "12/04/2024",
"paidAmount": "100.00",
"status": "On time"
},
{
"scheduledDate": "11/01/2024",
"scheduledPaidAmount": "456.85",
"actualDate": "10/31/2024",
"paidAmount": "456.85",
"status": "On time"
},
{
"scheduledDate": "10/01/2024",
"scheduledPaidAmount": "456.85",
"actualDate": "10/01/2024",
"paidAmount": "456.85",
"status": "On time"
},
{
"scheduledDate": "09/01/2024",
"scheduledPaidAmount": "456.85",
"actualDate": "09/03/2024",
"paidAmount": "456.85",
"status": "On time"
},
{
"scheduledDate": "08/01/2024",
"scheduledPaidAmount": "456.85",
"actualDate": "07/31/2024",
"paidAmount": "456.85",
"status": "On time"
},
{
"scheduledDate": "07/01/2024",
"scheduledPaidAmount": "456.85",
"actualDate": "07/01/2024",
"paidAmount": "456.85",
"status": "On time"
},
{
"scheduledDate": "06/01/2024",
"scheduledPaidAmount": "456.85",
"actualDate": "06/02/2024",
"paidAmount": "456.85",
"status": "On time"
},
{
"scheduledDate": "05/01/2024",
"scheduledPaidAmount": "456.85",
"actualDate": "04/30/2024",
"paidAmount": "456.85",
"status": "On time"
},
{
"scheduledDate": "04/15/2024",
"scheduledPaidAmount": "10000.00",
"actualDate": "04/14/2024",
"paidAmount": "10000.00",
"status": "On time"
}
]
},
"fa0003": {
"first_name": "test",
"last_name": "borrower",
"nickname": "borrower prepaid test loan",
"role": "borrower",
"coming_up": {},
"loan_state": {
"total_due": "1727.40",
"schedule_date": "03/01/2025",
"due_history": [
{
"schedule_date": "03/01/2025",
"interest": "36.51",
"principal": "420.34",
"due_amount": "456.85"
},
{
"schedule_date": "02/01/2025",
"interest": "43.23",
"principal": "413.62",
"due_amount": "456.85"
},
{
"schedule_date": "01/01/2025",
"interest": "46.03",
"principal": "410.82",
"due_amount": "456.85"
},
{
"schedule_date": "12/01/2024",
"interest": "47.23",
"principal": "409.62",
"due_amount": "356.85"
}
]
},
"loan_details": {},
"paymentBreakdown": {},
"recentPayments":
}
},
"lender": {
"fa0004": {
"first_name": "test",
"last_name": "borrower",
"nickname": "borrower complete test loan",
"role": "lender",
"coming_up": {},
"loan_state": {
"total_due": "1727.40",
"schedule_date": "03/01/2025",
"due_history": [
{
"schedule_date": "03/01/2025",
"interest": "36.51",
"principal": "420.34",
"due_amount": "456.85"
},
{
"schedule_date": "02/01/2025",
"interest": "43.23",
"principal": "413.62",
"due_amount": "456.85"
},
{
"schedule_date": "01/01/2025",
"interest": "46.03",
"principal": "410.82",
"due_amount": "456.85"
},
{
"schedule_date": "12/01/2024",
"interest": "47.23",
"principal": "409.62",
"due_amount": "356.85"
}
]
},
"loan_details": {},
"paymentBreakdown": {},
"recentPayments":
}
}
}

9

and strange part is that if i tried to do hard code it works for example see below
this hard code bind value

image
image942×744 27.4 KB

this is wappler picking up the values
image
image940×373 10.4 KB

and hard code bind values actually works but how do i manipulate for different loan numbers

10

Your issue is that you are selecting the loan_details as the basis for the repeat

image
image1046×249 58.9 KB

However, a repeat needs an array input

Loan_details is an object so there is nothing to iterate over.

"loan_details": {
"loan_amount": "10000.00",
"interest_rate": "8.00",
"contract_date": "04/03/2024",
"end_date": "03/01/2026",
"status": "Past Due",
"score": "A"
},

examine your data structure for the arrays (those enclosed in "[" and "]" such as "recent payments"

Those enclosed in braces are Objects (only 1 per entity) and need to be addresses as:

objectName.Property

Such as loan_details.loan_amount or loan_details.interest_rate etc

from a quick check of your output, the only entities which are arrays appear to be:

Presumably your base response "api.data.borrower" and "due_history": and "recentPayments":

as such, they are the only multi item sections in the response which can be used as the base for a repeat, all others need to be addressed by reference to their object relative to the repeat as you have done above

1 Like
11

But it don't solve the issue i've which is how to access the values without hardcode binding it
i wanted to changed the values but based on loanNo one thing i could do is change in my api and removed the nesting apart
but i'm looking for a way around in wappler

12

I assume you are using the server connect API component. Have you defined a schema for your api call?

13

Yes api is defined