JSON API response to table

App Building
1

Hello, Im very new at this. I query an API which returns responses like this:

{
  "request": {
    "Target": "Offer",
    "Format": "json",
    "Service": "SERVICE_NAME",
    "Version": "2",
    "NetworkToken": "TOKEN",
    "Method": "findAll",
    "fields": [
      "status",
      "advertiser_id",
      "name",
      "id"
    ],
    "filters": {
      "status": "active"
    },
    "contain": [
      "Goal",
      "Advertiser"
    ],
    "_": "1668798873832"
  },
  "response": {
    "status": 1,
    "httpStatus": 200,
    "data": {
      "123": {
        "Offer": {
          "status": "active",
          "advertiser_id": "149",
          "name": "Offer 1",
          "id": "123"
        },
        "Goal": {
          "21997": {
            "id": "21997",
            "offer_id": "123",
            "name": "Conversion",
            "status": "pending"
          }
        },
        "Advertiser": {
          "status": "active",
          "id": "149",
          "company": "COMPANY_NAME_1",
          "signup_ip": "IP"          
        }
      },
      "456": {
        "Offer": {
          "status": "active",
          "advertiser_id": "149",
          "name": "Offer 2",
          "id": "456"
        },
        "Goal": {
          "15516": {
            "id": "15516",
            "offer_id": "456",
            "name": "Conversion",
            "status": "active"
          }
        },
        "Advertiser": {
          "date_added": "2015-10-01 15:32:45",
          "status": "active",
          "id": "149",
          "company": "COMPANY_NAME_2",
          "signup_ip": "IP"
        }
      },
      "789": {
        "Offer": {
          "status": "pending",
          "advertiser_id": "149",
          "name": "Offer 3",
          "id": "789"
        },
        "Goal": {
          "21996": {
            "id": "21996",
            "offer_id": "789",
            "name": "Conversion",
            "status": "deleted"
          }
        },
        "Advertiser": {
          "date_added": "2015-10-01 15:32:45",
          "status": "active",
          "id": "149",
          "company": "COMPANY_NAME_3",
          "signup_ip": "IP"
        }
      },
    "errors": [],
    "errorMessage": null
  }
}
}

Ive tried following a few solution here and on youtube but I cant figure how to turn this into a table in the followind format:

image
image1144×185 11.2 KB

Any help is appreciated, thank you

2

Hey @MB1234!

Can you try using something akin to the following and let me know if that works?

const parseRow = (rowObject) => ({
  offer_id: rowObject.Offer.id,
  offer_status: rowObject.Offer.status,
  goal_id: rowObject.Goal.id,
  // etc.
});
return _.map(data.response.data, parseRow);
3

Hi @Kabirdas , thanks for the answer

So I added
const parseRow = (rowObject) => ({
offer_id: rowObject.Offer.id,
offer_status: rowObject.Offer.status,
goal_id: rowObject.Goal.id,
// etc.
});
return _.map(data.response.data, parseRow);

in Transformer but nothing is showing up in the table.

I tried the following in the Data field of the table

{{ query1.data.response.data }} - Cannot read properties of undefined (reading 'response')
{{ query1.data.response }} - Cannot read properties of undefined (reading 'response')
{{ query1.data }} - Value given is null

4

Update,

This works:

const parseRow = (rowObject) => ({
  offer_id: rowObject.Offer.id,
  offer_status: rowObject.Offer.status,
  offer_name: rowObject.Offer.name,
  // etc.
});
return _.map(data.response.data, parseRow);

But when I try to add date from Advertiser or Goal like

advertiser_id: rowObject.Advertiser.id

it returns "Could not evaluate transformer in query1: Error: Cannot read properties of undefined (reading 'id')

image
image2316×1049 150 KB

5

Hey @MB1234!

Does every row have an Advertiser object attached to it? I wonder if using optional chaining might help here, e.g. rowObject.Advertiser?.id instead of rowObject.Advertiser.id.