The most appropiate way to render unstructured data in react-CodePudding

I have a backend that returns unstructured data (another dev is responsible for the backend) and I have no idea how is the most appropiate way to render it, any ideas?.

What I have already tried is to render it with this library react-json-view but it's not very user friendly.

This is an example of the data I receive:

[
{
    "conditions": [
        "SIN_SALDO"
    ],
    "typeItem": "MSISDN",
    "createdDate": 1639677563,
    "data": {
        "msisdn": "571345543122"
    },
    "planName": "PRE_PAGO",
    "backendName": "backofficeco",
    "pk": "#CO#MSISDN#MI_tienda#backofficeco#cbb1efe963",
    "country": "CO",
    "resourceGroup": "MI_tienda"
},
{
    "typeItem": "MSISDN",
    "createdDate": 1644521244,
    "data": {
        "MSISDN": "asdfk"
    },
    "backendName": "adfs;fk",
    "pk": "#CO#MSISDN#asdf#adfs;fk#7578238817",
    "country": "CO",
    "resourceGroup": "asdf"
},
{
    "conditions": [
        "SIN_SALDO"
    ],
    "typeItem": "MSISDN",
    "createdDate": 1644940771,
    "data": {
        "msisdn": "3007279930"
    },
    "planName": "POS_PAGO",
    "backendName": "backofficeco",
    "pk": "#CO#MSISDN#MI_tienda#backofficeco#25831ae7cf",
    "country": "CO",
    "resourceGroup": "MI_tienda"
},
{
    "conditions": [
        "SIN_SALDO"
    ],
    "typeItem": "MSISDN",
    "createdDate": 1644420646,
    "data": {
        "msisdn": "571345543122"
    },
    "planName": "adfasdf",
    "backendName": "backofficeco",
    "pk": "#CO#MSISDN#asdfasdf#backofficeco#c30d28f552",
    "country": "CO",
    "resourceGroup": "MI_tienda"
},
{
    "typeItem": "MSISDN",
    "createdDate": 1644525223,
    "data": {
        "MSISDN": "asdfasd"
    },
    "backendName": "asdfasdf",
    "pk": "#CO#MSISDN#asdfasdf#asdfasdf#02ac5aa61b",
    "country": "CO",
    "resourceGroup": "asdfasdf"
},
{
    "conditions": [
        "adsfas"
    ],
    "typeItem": "MSISDN",
    "createdDate": 1646230406,
    "data": {
        "msisdn": "571345543122"
    },
    "planName": "adfasdf",
    "backendName": "backofficeco",
    "ttl": 1646835206,
    "pk": "#CO#MSISDN#MI_tienda#backofficeco#cd40ee06af",
    "country": "CO",
    "resourceGroup": "adsfa"
}

]

CodePudding user response：

Assuming you just want to render the list, you can try creating a map based on some key (maybe on 'pk') and pass it on, say to grid.