question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Error while displaying nested JSON Object DATA in DataTable

See original GitHub issue

I 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:closed
  • Created 3 years ago
  • Comments:11 (10 by maintainers)

github_iconTop GitHub Comments

2reactions
haloclinecommented, Sep 24, 2020

@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>
  • For your second column, you may specify designation as your property, but you still must reference the object property beginning with datum --> datum.designation.designationName or datum.designation.designationId
1reaction
parth611gitcommented, Oct 1, 2020

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Nested JSON data into Datatable not working - Stack Overflow
I suspect you mean to use "data" , inside your columns section - possibly like this: "data" : "track.album.name" . See the example...
Read more >
Unable to Load Complex JSON Object — DataTables forums
Hi, Apologies for the beginner's question I am unable to get a complex JSON object to load.It is a JSON Object with many...
Read more >
Datatables get data from nested JSON Object
Hi,. currently, I'am using REST API to provide the data to MDBDataTable. the DataTable is working fine, but I'am facing an issue when...
Read more >
Handling nested data objects using jQuery DataTables plugin
Common error: The very common error which occurs in DataTables is Invalid JSON response. When the data tables are loaded with data, it...
Read more >
Loading JSON data from Cloud Storage | BigQuery
Shows how to load nested/repeated JSON data and hive-partitioned JSON data. Describes JSON data ... Each JSON object must be on a separate...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found