将嵌套的 json 项目名称传递给函数答案

【问题标题】：Pass nested json item name to function将嵌套的 json 项目名称传递给函数
【发布时间】：2015-07-10 22:25:10
【问题描述】：

我有嵌套 json 数据与对象 Account 和 Category.Category 在帐户 json 数据中。我将默认列传递给映射函数并创建我的列。但是如果我通过 Category.Name 我无法在屏幕上看到。我怎么能将嵌套数据属性名称传递给此函数？

//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"
    }
}]

【问题讨论】：

JSON 样本比描述它更清晰。
<tr> 在 JavaScript 中不是有效的语法，除非那是 React 的 .jsx 。你的意思是要返回一个字符串？
抱歉复制粘贴问题。在我的屏幕上我可以看到名称 - 限制列但看不到 Category.Name 列
嗯，您没有名称为Category.Name 的属性，只有名称为Category。您是否期望 rowData['Category.Name'] 神奇地访问嵌套属性？
但我在类别中有名称，我想显示此日期。

标签： javascript arrays json reactjs react-jsx

【解决方案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 选项，或者使用普通函数代替）。

【讨论】：

我在网格中使用它。它在很多页面中。我该如何编写这个通用版本？
你是说你有其他数据，不想为每一列写一个渲染器？或者你觉得这个解决方案到底有什么过于具体的地方？
是的，我不想为每一列编写渲染器。 ["名称","限制","类别"];我想传递这样的列名，方法将处理这个。