Hey guys, i have an API that responses me with an object that have a multiple lists, like this JSON:
[
{
"type": "inventory",
"data": [
{
"index": 0,
"name": "AG00001 - DOBRADICA / AL228236",
"info": [
{
"type": "ERR",
"label": "Unit of measurement: EITA, don't exist"
}
]
},
{
"index": 6,
"name": "AG00007 - REPARO FREIO ESTACIONARIO COMPLETO",
"info": [
{
"type": "ERR",
"label": "Responsável: CASTELLO, not found, please verify that separator of name is the ';' character"
}
]
},
{
"index": 15,
"name": "AG00016 - CONECTOR MACHO 1/4 NPT X 5/16 TUBO",
"info": [
{
"type": "ERR",
"label": "Unit of measurement: EITA, don't exist"
}
]
}
]
}
]
And i would like to display it dynamically using a table with others table inside, is it possible?
I'm set in the local storage
And here is my component
My goal it's to get something close to this
Hi, welcome to the forums
Sure, that would work and the second screenshot seems to suggest you've already achieved it 
- You may find that there are other display options that become more suitable for your data, but the basic logic is:
- have a primary table that uses the data property of your array as it's data source
- enable expandable rows on the primary table
- in the expanded row add a secondary table that uses the info column of the primary table selectedRow as its data source
here's a quick example that might help you:
forum (1).json (26.8 KB)
Hi, thanks for the welcome, i tried your suggestion but still not working, using this i'll be hard-coded for only the first position in the array, it would render dynamically, for example this JSON:
[
{
"type": "inventory",
"data": [
{
"index": 0,
"name": "AG00001 - DOBRADICA / AL228236",
"info": [
{
"type": "ERR",
"label": "Unit of measurement: EITA, don't exist"
}
]
},
{
"index": 6,
"name": "AG00007 - REPARO FREIO ESTACIONARIO COMPLETO",
"info": [
{
"type": "ERR",
"label": "Responsável: CASTELLO, not found, please verify that separator of name is the ';' character"
}
]
},
{
"index": 15,
"name": "AG00016 - CONECTOR MACHO 1/4 NPT X 5/16 TUBO",
"info": [
{
"type": "ERR",
"label": "Unit of measurement: EITA, don't exist"
}
]
}
]
},
{
"type": "procedures",
"data": [
{
"label": "Cadastro de Procedimentos not found in excel"
}
]
},
{
"type": "Data procedures",
"data": [
{
"label": "Dados do Procedimentos not found in excel"
}
]
}
]
You can see that has 3 object, and inside each object i have other list called "data", and in the attribute "data" have other "info" list that will callback the users the problems when validate the excel, if i use [0] (first position) it will only load the first array i would like to run dynamic, in this case my sub-list will load a wrong information, like this:
And here what i'm trying to do, if i use this hardcode
