react-csv#153 : Changes to handle if at any point the nested keys passed do not exist then looks for key with dot notation in the object.

Author: hmudimi

README.md

@@ -151,6 +151,7 @@ data = [
   { details: { firstName: 'John', lastName: 'Jones' }, job: 'developer'},
 ];
 ```
+Note: if at any point the nested keys passed do not exist then looks for key with dot notation in the object.
 
 ### - **separator** Props:
 

sample-site/src/Table.jsx

@@ -4,13 +4,20 @@ class Table extends React.Component {
   state= {};
   renderHeaders() {
    return (<thead><tr>
-             {this.props.headers.map((header, i) => <th key={"th"+i}>{header}</th>)}
+             {this.props.headers.map((header, i) => <th key={"th"+i}>{typeof(header) === 'object' ? header.label : header}</th>)}
          </tr></thead>);
   }
 
    renderRow(row, key) {
      return (<tr key={'tbody-tr'+key}>
-               {row.map((cell, i) => <td key={'td-'+key+'-'+i}>{cell}</td>)}
+              {Array.isArray(row) ?
+                row.map((cell, i) => {
+                  return <td key={'td-'+key+'-'+i}>{typeof(cell) === 'object' ? cell.name : cell}</td>
+                }) :
+                Object.values(row).map((cell, i) => {
+                  return <td key={'td-'+key+'-'+i}>{typeof(cell) === 'object' ? cell.name : cell}</td>
+                })
+              }
            </tr>);
    }
 

sample-site/src/app.jsx

@@ -2,10 +2,10 @@ import React from 'react';
 import {CSVLink, CSVDownload} from 'react-csv';
 import Table from './Table.jsx';
 
-const csvHeaders = [
+const csvHeaders1 = [
 "Company","جهة الإتصال ","王玉普"
 ]
-const csvData =[
+const csvData1 = [
   ['Alfreds Futterkiste'	,'Maria Anders',	'Germany'] ,
   ['Rathath IT', 'Abdennour TM' , 'تونس'] ,
   ['Sinopec', '王玉普' , '中国'],
@@ -17,9 +17,30 @@ const csvData =[
   ['Software hourse', 'Soro' , 'Poland']
 ];
 
+const csvHeaders2 = [
+  { label: 'First. Name', key: 'first.name' },
+  { label: 'Last Name.', key: 'lastname' },
+  { label: 'E.m.a.i.l.', key: 'email' }
+];
+
+const csvData2 = [
+  { first:{name: 'Ahm.ed'}, lastname: 'Tomi', email: '[email protected]' },
+  { first:{name: 'Raed'}, lastname: 'Lab.es', email: '[email protected]' },
+  { first:{name: 'Yezzi'}, lastname: 'Min l3b', email: '[email protected]' }
+];
+
+const csvData3 = [
+  { 'first.name': 'Ahm.ed', lastname: 'Tomi', email: '[email protected]' },
+  { 'first.name': 'Raed', lastname: 'Lab.es', email: '[email protected]' },
+  { 'first.name': 'Yezzi', lastname: 'Min l3b', email: '[email protected]' }
+];
+
 class App extends React.Component {
 
-  state= {};
+  state= {
+    csvHeaders: csvHeaders1,
+    csvData: csvData1
+  };
   getFileName() {
     if (!this.state.filename) return undefined;
     if (!this.state.filename.endsWith('.csv')) return this.state.filename + '.csv';
@@ -29,8 +50,28 @@ class App extends React.Component {
     return (
       <div>
           <div ><h1>Pretty Example "React-csv"</h1></div>
+          <div className="row">
+              <div className="large-3 columns">
+                  <a className="btn"
+                  onClick={() => this.setState({csvHeaders: csvHeaders1, csvData: csvData1})}>
+                      Sample Array Data
+                  </a>
+              </div>
+              <div className="large-3 columns">
+                  <a className="btn"
+                  onClick={() => this.setState({csvHeaders: csvHeaders2, csvData: csvData2})}>Sample Object Data1</a>
+              </div>
+              <div className="large-3 columns">
+                  <a className="btn"
+                  onClick={() => this.setState({csvHeaders: csvHeaders2, csvData: csvData3})}>Sample Object Data2</a>
+              </div>
+              <div className="large-3 columns">
+                  <a className="btn"
+                  onClick={() => this.setState({csvHeaders: csvHeaders1, csvData: csvData2})}>Sample Object Data3</a>
+              </div>
+          </div>
           <div>
-              <Table headers={csvHeaders} data={csvData} />
+              <Table headers={this.state.csvHeaders} data={this.state.csvData} />
           </div>
           <div className="row">
               <div className="large-6 columns"></div>
@@ -41,15 +82,21 @@ class App extends React.Component {
               </div>
               <div className="large-2 columns">
                   <CSVLink
-                    headers={csvHeaders}
-                    data={csvData}
+                    headers={this.state.csvHeaders}
+                    data={this.state.csvData}
                     filename={this.getFileName()}
                     className="btn"
                   >
                     Export to CSV ⬇
                   </CSVLink>
               </div>
           </div>
+          <div>
+              <b>Header :</b>
+              <div><pre>{JSON.stringify(this.state.csvHeaders, null, 2) }</pre></div>
+              <b>Data : </b>
+              <div><pre>{JSON.stringify(this.state.csvData, null, 2) }</pre></div>
+          </div>
 
       </div>
     );

src/core.js

@@ -43,8 +43,8 @@ export const getHeaderValue = (property, obj) => {
         return o[p];
       }
     }, obj);
-  
-  return (foundValue === undefined) ? '' : foundValue;
+  // if at any point the nested keys passed do not exist then looks for key `property` in object obj
+  return (foundValue === undefined) ? ((property in obj) ? obj[property] : '') : foundValue;
 }
 
 export const elementOrEmpty = (element) => element || element === 0 ? element : '';

test/coreSpec.js

@@ -165,6 +165,32 @@ describe('In browser environment', () => {
       ];
       expect(actual).toEqual(expected);
     });
+    it(`accepts dot notation in headers and map to key when nested keys are not found`, () => {
+      fixtures = [{
+        maths: '90'
+      }, {
+        sport: '97'
+      }, {
+        maths: '77',
+        sport: 0
+      }, {
+        people: {
+          name: 'john'
+        }
+      }, {
+        'people.age': '20'
+      }]
+      const headers = ['maths', 'sport', 'phy', 'ch', 'people.name', 'people.age'];
+      const actual = jsons2arrays(fixtures, headers);
+      const expected = [
+        headers, ['90', '', '', '', '', ''],
+        ['', '97', '', '', '', ''],
+        ['77', 0, '', '', '', ''],
+        ['', '', '', '', 'john', ''],
+        ['', '', '', '', '', '20']
+      ];
+      expect(actual).toEqual(expected);
+    });
   });
 
   describe(`core::arrays2csv`, () => {