渲染部分 JSON 对象

Question

我在将一些 JSON 数据渲染到 React Table（来自库 react-table）时遇到了一些问题。这是我正在使用的 json 的示例：

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'
  }
]

对于选定的语言，如果需要，我只需要显示每列翻译文本的一个对象。（在此示例中，日期不需要翻译成任何特定语言）

这是我如何渲染我的反应-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>
    )
  }

你知道如何做到这一点吗？

更新

这是我解决问题的方法：

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>
    )

这是我创建的函数（假设 lang 是我想要的语言）：

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]
      }))
    }

在我的示例中，我认为 lang 是通过您的道具传递的。您必须将其替换为：

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'
}

渲染部分 JSON 对象

Render partial JSON object

json

reactjs

react-table