+ Start a Discussion
Raju Krishnamoorthy 17Raju Krishnamoorthy 17 

Show JSON parent-child response in LWC

Hello LWC gurus: please help.
I'm calling out a REST service that returns a JSON response that contains a Parent-Child relationship.  For example, response contains 10 Sales Orders, each Sales Order can upto 100+ Order lines.   I want to show the Orders in LWC as HTML table, and when the user clicks on one particular Order (row action?!), all the Order Lines of that Order should be displayed.  What is the best approach from LWC perspective? If you can point to some example code that would be of great help. Thank you.
Best Answer chosen by Raju Krishnamoorthy 17
Sachin HoodaSachin Hooda
Hi Raju,
Yes you can use a data table to show the orders. However, I would suggest to have a look at lightning tree grid (https://developer.salesforce.com/docs/component-library/bundle/lightning:treeGrid/example). I think it would match your use case. Since you need something like onrowaction. Since a view button would be suitable. The list of order line would be expanded. 
Lightning tree grid supports onrowaction as well.
or if a data table suits your use case, you can know more about the onrowaction here (https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/documentation).

All Answers

Sachin HoodaSachin Hooda
Hi Raju,
You can creata a Wrapper class like
public Class OrdersInfo {
    public String customerName;
    public List<OrderNumData> orderList;
     
    public Class OrderNumData{
        public List<String> orderLineList;
    }
}
Make sure you name variaes of the Wrapper same as objects from your JSON.
or if you don't need headache to create the Wrapper or the json has multiple levels. You can use any JSON2APEX which will generate apex class corresponding to the JSON provided. You can try this one. (https://json2apex.herokuapp.com/)
Once you've created the Wrapper. You need to deserialize it. 
Use JSON.deserialize (https://developer.salesforce.com/docs/atlas.en-us.apexcode.meta/apexcode/apex_class_System_Json.htm). Hold the response in an object or list of the Wrapper and return it to your LWC component.
Which you can use in your table.
In case you've any other doubt. Please post them here.

______
Regards,
Sachin
(:
 
Raju Krishnamoorthy 17Raju Krishnamoorthy 17
Thanks, Sachin. On the LWC side, I need to first show all the Orders (as datatable, perhaps) and then if the User wants to see the details of a particular Order (row Action), click on the View Button and then show the Order Line List in another Modal Window.  How can we achieve this? BTW, thank you for above reply. It really helped.
Sachin HoodaSachin Hooda
Hi Raju,
Yes you can use a data table to show the orders. However, I would suggest to have a look at lightning tree grid (https://developer.salesforce.com/docs/component-library/bundle/lightning:treeGrid/example). I think it would match your use case. Since you need something like onrowaction. Since a view button would be suitable. The list of order line would be expanded. 
Lightning tree grid supports onrowaction as well.
or if a data table suits your use case, you can know more about the onrowaction here (https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/documentation).
This was selected as the best answer