如何在React中将一个JSON文件转换为另一个JSON文件

我有一个JSON文件，如下所示：

[
    {
        "quantity": "200",
        "prodType": "stock",
        "symbol": "LOL",
        "prodDesc": "Εθνική τράπεζα",
        "market": "Greece",
        "averageCost": "131,16",
        "totalCost": "123,47",
        "lastPrice": "121,123",
        "value": "123,34",
        "positionPercentage": "10",
        "valueEUR": "113,23",
        "pl": "1300",
        "plPercentage": "12",
        "plEuro": "1238",
        "results": "12-01-2017",
        "dividend": "12-03-2017",
        "isin": "1234566"
    }
]

然后，我创建一个具有以下格式的表：

Quantity    Product Type    Symbol  Product Desc    Market  Average Cost    
200            stock         LOL      ET            Greece    131,16

Quantity     Product Type   Product Desc    Market  Average Cost
 Symbol     
  200         stock              ET         Greece     131,16
  LOL              

但我想用以下格式显示上面的表格：

Quantity    Product Type    Symbol  Product Desc    Market  Average Cost    
200            stock         LOL      ET            Greece    131,16

Quantity     Product Type   Product Desc    Market  Average Cost
 Symbol     
  200         stock              ET         Greece     131,16
  LOL              

---

我认为最好的方法是从上面的第五个JSON以所需的格式创建一个JSON文件。你知道我怎么做吗？

如果我理解得很好，应该是这样的：

var obj = JSON.parse(yourJsonFile);

return <table>
  <tr>
    <th>Quantity<br/>Symbol</th>
    <th>Product Type</th>
    <th>Product Desc</th>
    <th>Market</th>
    <th>Averate Cost</th>
  </tr>
  <tr>
    <td>{obj.quantity}<br/>{obj.symbol}</td>
    <td>{obj.prodType}</td>
    <td>{obj.prodDesc}</td>
    <td>{obj.market}</td>
    <td>{obj.averageCost}</td>
  </tr>
</table>

var obj=JSON.parse（yourJsonFile）；
返回
数量
符号
产品类型
产品说明
市场
平均成本
{obj.quantity}
{obj.symbol}
{obj.prodType}
{obj.prodDesc}
{obj.market}
{obj.averageCost}

如果我理解得很好，应该是这样的：

var obj = JSON.parse(yourJsonFile);

return <table>
  <tr>
    <th>Quantity<br/>Symbol</th>
    <th>Product Type</th>
    <th>Product Desc</th>
    <th>Market</th>
    <th>Averate Cost</th>
  </tr>
  <tr>
    <td>{obj.quantity}<br/>{obj.symbol}</td>
    <td>{obj.prodType}</td>
    <td>{obj.prodDesc}</td>
    <td>{obj.market}</td>
    <td>{obj.averageCost}</td>
  </tr>
</table>

var obj=JSON.parse（yourJsonFile）；
返回
数量
符号
产品类型
产品说明
市场
平均成本
{obj.quantity}
{obj.symbol}
{obj.prodType}
{obj.prodDesc}
{obj.market}
{obj.averageCost}

您可以用一种通用的方式编写，它将填充所有行，如果您有更多数据，请尝试以下操作：

 _getTableData(){
    return this.state.currentValue.map((obj, index)=>
        <tr key={index}>
            <td>{obj.quantity}<br/>{obj.symbol}</td>
            <td>{obj.prodType}</td>
            <td>{obj.prodDesc}</td>
            <td>{obj.market}</td>
            <td>{obj.averageCost}</td>
        </tr>
    );
}


render() {
    return 
      <table>
          <tbody>
              <tr>
                  <th>Quantity<br/>Symbol</th>
                  <th>Product Type</th>
                  <th>Product Desc</th>
                  <th>Market</th>
                  <th>Averate Cost</th>
              </tr>
              {this._getTableData()}
          </tbody>
      </table>
}

\u getTableData（）{
返回此.state.currentValue.map（（对象，索引）=>
{obj.quantity}
{obj.symbol}
{obj.prodType}
{obj.prodDesc}
{obj.market}
{obj.averageCost}
);
}
render（）{
返回
数量
符号
产品类型
产品说明
市场
平均成本
{this.\u getTableData（）}
}

---

检查

jsfiddle

：

上的工作代码。您可以用通用方式编写此代码，它将填充所有行，如果您有更多数据，请尝试以下操作：

 _getTableData(){
    return this.state.currentValue.map((obj, index)=>
        <tr key={index}>
            <td>{obj.quantity}<br/>{obj.symbol}</td>
            <td>{obj.prodType}</td>
            <td>{obj.prodDesc}</td>
            <td>{obj.market}</td>
            <td>{obj.averageCost}</td>
        </tr>
    );
}


render() {
    return 
      <table>
          <tbody>
              <tr>
                  <th>Quantity<br/>Symbol</th>
                  <th>Product Type</th>
                  <th>Product Desc</th>
                  <th>Market</th>
                  <th>Averate Cost</th>
              </tr>
              {this._getTableData()}
          </tbody>
      </table>
}

\u getTableData（）{
返回此.state.currentValue.map（（对象，索引）=>
{obj.quantity}
{obj.symbol}
{obj.prodType}
{obj.prodDesc}
{obj.market}
{obj.averageCost}
);
}
render（）{
返回
数量
符号
产品类型
产品说明
市场
平均成本
{this.\u getTableData（）}
}

---

检查

jsfiddle上的工作代码

：

重点是修改JSON还是管理它的显示方式？你用什么来呈现你的表格？我想像上面那样管理它的显示方式。出于这个原因，我认为最好的方法是修改JSON。在我的列表文件中，我正在写：{accounts.map（（account）=>我还有一个账户条目，通过它我可以创建一行我的表格。我认为你可以在ui中直接处理这个问题，而无需创建新的json。但是json是从另一层默认创建的，就像上面的格式一样，所以我想修改它。重点是修改json或管理它的显示方式？你怎么办你用什么来呈现你的表？我想用上面的方式来管理它的显示方式。因此，我认为最好的方法是修改JSON。在我的列表文件中，我正在写：{accounts.map（（account）=>我还有一个账户条目，通过它我可以创建一行我的表格。我认为你可以在ui中直接处理这个问题，而无需创建新的json。但是json是从另一个层默认创建的，就像上面的格式一样，所以我想修改你的回复Karol的iThanks。但这就像创建第二行。我想要在同一行中显示数量/符号已编辑。现在更好吗？你太棒了！谢谢：）谢谢你的回答Karol。但这就像创建第二行。我想在同一行中显示数量/符号已编辑。现在更好吗？你太棒了！谢谢：）