API Query: How do you transform a nested array into separate columns in the table?

I have a response like this:

{
  "id": "123",
  "data": [
    {
      "param": "rco2",
      "units": "ppm",
      "span": 60,
      "points": [
        {
          "ts": "2022-05-27T17:54:31Z",
          "value": 1673
        }
      ]
    }    

Multiple rows of this. And i want the contents of the points array to be two columns instead of one in a Table (right now one Points columns just shows array entries). So one column for ts and one for value

Hey @gdilla! Would something like this work for you?

{{query2.data.map(row => _.merge(row, row.data[0], row.data[0].points[0]))}}

Basically, just mapping through your data and merging all the nested objects per row.

Let me know if you have any questions about this at all!

Thank you! should work. i'm having trouble pulling it off though.

Happy to help you pull it off! Would you mind sharing what you have so far? :slightly_smiling_face:

Hi @victoria

I have a similar problem, perhaps you can help me?

I am importing data from a form tool, the data looks like this:

{
  "responseCode": 200,
  "message": "success",
  "content": [
    {
      "id": "5401791532619965104",
      "form_id": "222614742976968",
      "ip": "50.238.135.162",
      "created_at": "2022-09-28 08:59:13",
      "status": "ACTIVE",
      "new": "1",
      "flag": "0",
      "notes": "",
      "updated_at": null,
      "answers": {
        "1": {
          "name": "heading",
          "order": "1",
          "text": "Business Account Application",
          "type": "control_head"
        },
        "2": {
          "name": "submit",
          "order": "19",
          "text": "Submit",
          "type": "control_button"
        },
        "3": {
          "cfname": "SmartyStreets",
          "name": "typeA",
          "order": "10",
          "selectedField": "55ac891c52ef1852630000bb",
          "static": "No",
          "text": "Invoice Address",
          "type": "control_widget",
          "answer": "Street address: 110 Fun Street\r\nCity: pittsburgh\r\nState: PA\r\nZip Code: 15023"
        },
        "6": {
          "name": "accountInformation",
          "order": "2",
          "text": "Account Information",
          "type": "control_head"
        },
        "8": {
          "name": "companyName",
          "order": "3",
          "text": "Company Name",
          "type": "control_textbox",
          "answer": "textbox_sample0"
        },
        "11": {
          "name": "honey",
          "order": "14",
          "text": "Honey",
          "type": "control_textbox"
        },
        "13": {
          "name": "companyWebsite",
          "order": "4",
          "text": "Company Website",
          "type": "control_textbox",
          "answer": "textbox_sample1"
        },
        "14": {
          "name": "billingInformation",
          "order": "5",
          "text": "Billing Information",
          "type": "control_head"
        },
        "15": {
          "name": "billingContact",
          "order": "6",
          "sublabels": "{\"prefix\":\"Prefix\",\"first\":\"First Name\",\"middle\":\"Middle Name\",\"last\":\"Last Name\",\"suffix\":\"Suffix\"}",
          "text": "Billing Contact Name",
          "type": "control_fullname",
          "answer": {
            "first": "textbox_sample2",
            "last": "textbox_sample3"
          },
          "prettyFormat": "textbox_sample2 textbox_sample3"
        },
        "16": {
          "name": "billingContact16",
          "order": "7",
          "text": "Billing Contact Email",
          "type": "control_email",
          "answer": "john@example.com"
        },
        "17": {
          "name": "billingContact17",
          "order": "8",
          "sublabels": "{\"country\":\"Country Code\",\"area\":\"Area Code\",\"phone\":\"Phone Number\",\"full\":\"Phone Number\",\"masked\":\"Please enter a valid phone number.\"}",
          "text": "Billing Contact Phone",
          "type": "control_phone",
          "answer": {
            "full": "(111) 111-1111"
          },
          "prettyFormat": "(111) 111-1111"
        },
        "18": {
          "name": "emailInvoices",
          "order": "9",
          "text": "Email Invoices to:",
          "type": "control_email",
          "answer": "john@example.com"
        },
        "20": {
          "name": "shippingInformation",
          "order": "11",
          "text": "Shipping Information",
          "type": "control_head"
        },
        "22": {
          "cfname": "SmartyStreets",
          "name": "primaryShipping",
          "order": "12",
          "selectedField": "55ac891c52ef1852630000bb",
          "static": "No",
          "text": "Primary Shipping Address",
          "type": "control_widget",
          "answer": "Street address: 110 Fun Street\r\nCity: pittsburgh\r\nState: PA\r\nZip Code: 15023"
        },
        "23": {
          "name": "doYou",
          "order": "13",
          "text": "Do you plan to export products?",
          "type": "control_radio",
          "answer": "No"
        },
        "27": {
          "name": "taxexemptStatus",
          "order": "15",
          "text": "Tax-Exempt Status",
          "type": "control_head"
        },
        "28": {
          "name": "isYour",
          "order": "16",
          "text": "Is your organization exempt from sales tax?",
          "type": "control_radio",
          "answer": "No"
        },
        "31": {
          "name": "pleaseAttach",
          "order": "18",
          "text": "Please attach W-9",
          "type": "control_fileupload",
          "answer": []
        },
        "33": {
          "name": "additionalInformation",
          "order": "17",
          "text": "Additional Information",
          "type": "control_head"
        }
      }
    }
  ],
  "duration": "43.57ms",
  "resultSet": {
    "offset": 0,
    "limit": 20,
    "count": 1
  }
}

each of the numbered sections represents a question on the form. What I'm trying to do is have one table which is the "form header" and another table that when you click on that form response, it shows the "form body" which is the responses within those numbered sections.

Can you help me out? I'm a real newbie at this.

Thank you so much for sending your data, @bones1985! It's pretty nested, so I wrote a little Javascript to get to the answers only (assuming that's what you're looking to display).

I displayed the data in one table (but hid all columns except name) and then in another table, displayed {{ [that_first_table.selectedRow.data] }} and hid the name column so it's not redundant.

See GIF for current behavior!

A couple callouts:

In the second table, I put brackets around the selectedRow data {{ [that_first_table.selectedRow.data] }} because selectedRow.data is an object, but tables expect either objects of arrays or arrays of objects! So by adding brackets, I converted the data into an array of objects (technically, just one object, but still counts!)

In your app, you likely have a resource query returning the data that you pasted above. You don't need to write a whole new JS transformer like I did in my app. You can just add a transformer to your query itself and do the un-nesting there. It'll look something like this:

return return Object.values(data.content[0].answers)

I've attached the app so you can import it and take a look around (here are instructions on importing apps into your own instance—just a couple clicks!)

And let me know if I can help clarify or further expand on your use case :blush:
selectedRowTable

form-20to-20table-20to-20table-20repro.json