Передайте имя вложенного json-элемента в функцию

Question

У меня есть вложенные данные json с объектами. Учетная запись и категория. Категория находится в учетной записи json data. Я передаю столбцы по умолчанию для функции map, и она создает мои столбцы. Но если я передаю Category.Name i can not см. на экране. Как я могу передать имя свойства вложенных данных этой функции?

//Default Columns: 
this.defaultColumns = ["Name","Limit","Category.Name"];  

//My Function: 
that.props.results.map(function(rowData){ 
      return (
       <tr> 
       {that.props.defaultColumns.map(function (column) { 
        return (
         <td>{rowData[column]}</td> 
        ); 
       </tr>})} 

JSON данные:

[{ 
    "RowNumber":"e0275f18-f86a-1d2e-97e6-b8ce9a4a7fef", 
    "Name":1, 
    "Limit":78, 
    "Category":{ 
     "RowNumber":"b72a77db-8c44-8b59-5044-3c42595203aa", 
     "Name":"Produce" 
    } 
}] 

Answer 1

Я не уверен, если вы знаете, что или нет, но вы не можете получить доступ к вложенной собственности через rowData['Category.Name']. Это буквально пытаются получить доступ к свойству с именем Category.Name, то есть он будет работать, если у вас объект как

{ 
    'Cateogry.Name': 42 
} 

Одна вещь, которую вы можете сделать, это указать функции визуализации для каждого из столбцов. Эти функции рендеринга определяют способ доступа к данным для каждого столбца. Например:

var columnRenderer = { 
    Name: x => x, 
    Limit: x => x, 
    Category: x => x.Name 
}; 

Тогда, учитывая ваши столбцы как

//Default Columns: 
this.defaultColumns = ["Name","Limit","Category"];  

Вы можете визуализировать таблицу с

that.props.results.map(
    rowData => 
    <tr> 
     {that.props.defaultColumns.map(
     column => <td>{columnRenderer(rowData[column])}</td> 
    )} 
    </tr> 
); 

(Примечание: Я использую функции стрелок здесь, компонент ES6, поэтому, если вы используете инструменты командной строки jsx, вам необходимо передать опцию --harmony или вместо этого использовать обычные функции).