Render partial JSON object - json

Question

I'm having some issue on rendering some JSON data into a React Table (which comes from the library react-table). Here is an exemple of a json I'm working with :
const translateditems = [
{
id: 1,
colonne1: [
{
language: 'en',
content: 'Column n°1'
},
{
language: 'fr',
content: 'Colonne n°1'
}
],
colonne2: [
{
language: 'en',
content: 'Column n°2'
},
{
language: 'fr',
content: 'Colonne n°2'
}
],
dateCreated: '2018 - 02 - 01 30: 00: 00.000'
}
]
For a chosen language, I need to only show one object of the translated texts of each column if needed. (In this example, the date does not need to be translated in any particular language)
Here is how I render my react-table :
constructor () {
super()
this.state = {
data: translateditems
}
}
render () {
const { data } = this.state
const headers = []
// I use all the name fields in the first json object as headers
for (var key in Object.keys(data[0])) {
headers.push(Object({
'content': Object.keys(data[0])[key]
}))
}
return (
<div>
<ReactTable
data={data}
columns={headers.map(header => {
return ({
Header: header.content,
accessor: header.content
})
})
}
defaultPageSize={10}
className='-striped -highlight'
/>
<br />
</div>
)
}
Do you have any clue on how to do this ?
UPDATE
Here's what I did to solve my problem :
return (
<div>
<ReactTable
data={data}
columns={headers.map(header => {
return ({
Header: header.content,
accessor: header.content,
// I added a function to apply on my Cell
Cell: row => (
<div>{this.renderTranslatedItem(data, header.content, row.index)}</div>
)
})
})
}
defaultPageSize={10}
className='-striped -highlight'
/>
<br />
</div>
)
And here's the function I made (assuming lang to be the language I want):
renderTranslatedItem (data, column, rowIndex) {
// I check if the value is an array -> if it's not, then I return null
if (Object.prototype.toString.call(data[rowIndex][column]) !== '[object Array]') {
return null;
}
for (var i in data[rowIndex][column]) {
if (data[rowIndex][column][i].language === lang) {
return data[rowIndex][column][i].content
}
}
}

Answer 1

for (var key in Object.keys(data[0])) {
const headers = []
// I use all the name fields in the first json object as headers
headers.push(Object({
'content': Object.keys(data[0])[key]
}))
}
In my example, I consider lang is passed through your props.
You have to replace it by:
const { lang } = this.props
const headers = Object.keys(data[0]).reduce(
(acc, key)=> {
return key!=='id' && key!=='dateCreated' && data[0][key][lang]
? { ...acc, [key] : data[0][key][lang] }
: { ...acc, [key]:null }
},{})
//console.log(headers) will output this:
{
colonne1:'colonne1',
colonne2:'colonne2'
}