Error while displaying nested JSON Object DATA in DataTable
See original GitHub issueI have used DataTable to display JSON data. I have defined columns and DATA are fetched using API. Each row in API response, is nested JavaScript Object I am facing issue issue in displaying data from nested JavaScript Object.
column= [
{property: "empName", header:"Employee Name"},
{property: "designation", header:"Designation"}];
data = [
{"empName": "EMP001", "designation": {"designationId" : "1", "designationName" :"Software Engineer"},
{"empName": "EMP002", "designation": {"designationId" : "2", "designationName" :"Project Manager"}]
How can I display “desginationName” which is nested under “designation”?
Expected Behavior
I have tried by make column property as designation.designationName and it is working fine. It must make property as designation. In such allow user to render data using render prop like,
render : (datum) => (<Text value={datum.designation.designationName} />
),
Actual Behavior
DataTable must make property value as designation but not as designation.designationName I have tried with rendering designationName using render prop, but is giving me below error:
Encountered two children with the same key,
[object Object]. Keys should be unique so that components maintain their identity across updates
Your Environment
- Grommet version: 2.14.0
- Browser Name and version: Chrome Version 84.0.4147.105 (Official Build) (64-bit)
- Operating System and version (desktop or mobile): Windows 10
Issue Analytics
- State:
- Created 3 years ago
- Comments:11 (10 by maintainers)
Top GitHub Comments
@parth611git I believe this accomplishes what you are attempting: https://codesandbox.io/s/sparkling-cdn-xcisc?file=/src/App.js
A couple points to note:
<Text value={datum.designation.designationName} />
should be<Text>{datum.designation.designationName}</Text>
designation
as your property, but you still must reference the object property beginning withdatum
-->datum.designation.designationName
ordatum.designation.designationId
Thank you, @IanKBovard I did not face warning right now. I will try again with proper data to reproduce it. So right now we can close this issue as it fulfill initial requirement of this issue.