0

How to display nested array of arrays

[
  [
    { Id: "0035g00000AXuUAAA1" },
    { Name: "Person" },
    { key: "AccountId", value: "0015g00000KuZmEAAV" },
    { key: "First Name", value: "Nadie" },
    { key: "Last Name", value: "Person" },
    { key: "Birth Date", value: undefined },
  ],
  [
    { Id: "0035g00000AXuUAAA1" },
    { Name: "Person" },
    { key: "AccountId", value: "0015g00000KuZmEAAV" },
    { key: "First Name", value: "Nadie" },
    { key: "Last Name", value: "Person" },
    { key: "Birth Date", value: undefined },
  ],
  [
    { Id: "0035g00000AXuUAAA1" },
    { Name: "Person" },
    { key: "AccountId", value: "0015g00000KuZmEAAV" },
    { key: "First Name", value: "Nadie" },
    { key: "Last Name", value: "Person" },
    { key: "Birth Date", value: undefined },
  ],
  [
    { Id: "0035g00000AXuUAAA1" },
    { Name: "Person" },
    { key: "AccountId", value: "0015g00000KuZmEAAV" },
    { key: "First Name", value: "Nadie" },
    { key: "Last Name", value: "Person" },
    { key: "Birth Date", value: undefined },
  ],
  [
    { Id: "0035g00000AXuUAAA1" },
    { Name: "Person" },
    { key: "AccountId", value: "0015g00000KuZmEAAV" },
    { key: "First Name", value: "Nadie" },
    { key: "Last Name", value: "Person" },
    { key: "Birth Date", value: undefined },
  ],
]
Improve this question
1
  • 1
    it does not look like a array of array.it looks like nested data in JSON format (which does not look valid JSON also). you have Id ,Name , AccountId , first Name, last Name , birth date , data in structurewhich you need to parse and store in an array. what you have tried till now?
    – gaurav sharma
    Commented Dec 18, 2021 at 12:31

1 Answer 1

Reset to default
2

One important thing in LWC is that you must have a "key", so it is impossible to work with this data as it is now.

A minimal transform method will work, though:

function transform(source) {
  let result = source.map((values, index) => ({
    index, 
    values: values.reduce((acc, row) => 
      (row.key? (acc.fields.push(row), acc): Object.assign(acc, row)), 
      { fields: [] })
  }))
  return result
}

Which you can then iterate over the various parts:

<template>
    <lightning-layout multiple-rows for:each={data} for:item="section" key={section.index}>
        <lightning-layout-item size="6">Record Id</lightning-layout-item>
        <lightning-layout-item size="6">{section.values.Id}</lightning-layout-item>
        <lightning-layout-item size="6">Record Name</lightning-layout-item>
        <lightning-layout-item size="6">{section.values.Name}</lightning-layout-item>
        <template for:each={section.values.fields} for:item="field">
            <lightning-layout-item key={field.key} size="6">
                {field.key}
            </lightning-layout-item>
            <lightning-layout-item key={field.key} size="6">
                <template if:true={field.value}>{field.value}</template>
                <template if:false={field.value}>-</template>
            </lightning-layout-item>
        </template>
    </lightning-layout>
</template>

I have created this demo for you.

Improve this answer
1
  • Thanks it works once can you please explain me the transform method with an array of objects as example. Here "(row.key? (acc.fields.push(row), acc): Object.assign(acc, row))" row refers to each Object in the array and we are checking whether key exists or not if not exists we are cloning the object if key exists then we are pushing into the fields array created in the object but what is this (acc.fields.push(row), acc) can help me why adding ,acc
    – Aruna Anala
    Commented Dec 20, 2021 at 5:58

You must log in to answer this question.

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