2

I'm trying to display data from HTTP API response from third system in LWC app.

The problem is, that some of that data that I get from the external system is in following types:

enter image description here

I have trouble display the selected columns. If the returned data is just str || int .. data is properly displayed.

The mapping loop is as following:

.then(response => {
                let responseData = JSON.parse(response);
                var data = [];
                responseData.data.forEach(row => {
                  let newRow = {};
                      row.forEach((element, index) => {
                    newRow[this.columns[index].fieldName] = element;
                  });
                  data.push(newRow);
                });
                this.data_Datatable = data;
            })
            .catch(error => {
                this.error = error;
            });

WHAT I'VE TRIED:

I tried this but it doesn't work:

JSON.stringify(newRow[this.columns[index].fieldName] = element); 

Thank you.

EDIT 1 11/17/2022 - Forgot to attach datatable screenshot:

enter image description here

As you can see, I have 2 columns completely empty - those are the types that are [str, int], or [int, int] ...

EDIT 2 11/17/2022 - ADDED JSON response:

    {
        "data": [
            [
                "1802523701456533",
                "701300b97e2e1000",
                "2021-03-08T03:09:57",
                [
                    1,
                    "Smartphone"
                ],
                "Galaxy S6"
            ],
            [
                "15250809629146723",
                "5957676d3b753f69",
                "2021-02-18T07:19:04",
                [
                    1,
                    "Smartphone"
                ],
                "Galaxy S6 Edge+"
            ],
            [
                "20487780899778413",
                "7a5911e7f5731400",
                "2021-01-26T15:54:48",
                [
                    0,
                    "Desktop"
                ],
                ""
            ],
            [
                "27450806533608027",
                "186af40e19b1cfdf",
                "2021-02-27T00:55:45",
                [
                    1,
                    "Smartphone"
                ],
                "iPhone"
            ],
            [
                "41195804276029081",
                "2ec0802a5c592800",
                "2021-01-22T06:33:13",
                [
                    0,
                    "Desktop"
                ],
                ""
            ], ...]
"meta": {
        "columns": [
            "session_id",
            "visitor_id",
            "timestamp",
            "device_type",
            "device_model"
        ],
        "count": 1356
    }
}

EDIT 3 11/17/2022

enter image description here

Defined outsite od LWC class:

import SystemModstamp from '@salesforce/schema/Account.SystemModstamp';

const flatten = (obj) => {
  return [...obj].map(item => {
    if (Array.isArray(item)) {
      return ('' + flatten(item)).split(',');
      }
    else {
      return '' + item
    }
  });
}

export default class mainComponent extends LightningElement {

LWC Apex imperative call -->

}).then(response => {
        let responseData = JSON.parse(response);
        console.log('responseData.data ===== \n' + responseData.data);
        this.data_Datatable = flatten(responseData.data);
      })
      .catch(error => {
        his.error = error;
      });
    }
7
  • 1
    Can you show some of the data? It looks like in addition to variable data types, there are variable numbers of elements? Commented Nov 17, 2022 at 17:01
  • I forgot to attach a screenshot of the data table. Thank you for that. Fixed - EDIT 1.
    – Stojchesky
    Commented Nov 17, 2022 at 17:06
  • 1
    Without seeing the JSON/XML/whatever, you're asking us to guess what the data looks like. Also, the columns configuration would help demystify this issue.
    – sfdcfox
    Commented Nov 17, 2022 at 17:08
  • 1
    Actually, I'd prefer if you just gave us maybe 5-6 lines of actual data (not a screenshot). I can't actually read the screenshot Commented Nov 17, 2022 at 17:11
  • @CasparHarmer added couple of JSON response data
    – Stojchesky
    Commented Nov 17, 2022 at 17:14

1 Answer 1

1

Hmm how about this recursive function:

const flatten = (obj) => {
  return [...obj].map(item => {
    if (Array.isArray(item) ){
      return ('' + flatten(item)).split(',');
    }
    else {
      return '' + item
    }
  });
}

let flattened = flatten(data);

It works on each row. flatten takes the array (or object) and for each item in the array, it either appends a string (converting it to a string) or if it's still an array, it calls itself again.

To call this, define flatten outside the LWC class - as a const like above. Then invoke like this:

this.data_Datatable = flatten(responseData.data);

You'll be able to entirely skip the forEach loop that you have.


Check out a JSFiddle demonstrating this here

5
  • I don't see the data anymore, something's missing. Tried console.log the response from apex API call - I got the correct response as previously.
    – Stojchesky
    Commented Nov 17, 2022 at 20:25
  • 1
    edited answer - see above. Commented Nov 17, 2022 at 20:43
  • Edit 3 added the .then and LWC outside definition of const flatten - data is still not shown :|
    – Stojchesky
    Commented Nov 17, 2022 at 21:05
  • You'll have to open up the console and debug this. I took your dataset and ran it through the method above and it worked. I'll update the question with this. Commented Nov 17, 2022 at 21:20
  • 1
    Thank you for your time. :)
    – Stojchesky
    Commented Nov 17, 2022 at 21:41

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .