如何在 React 中将 JSON 数据显示为表格

Posted 2023-02-22

【中文标题】如何在 React 中将 JSON 数据显示为表格

【英文标题】：How to display JSON data inside render as table in React

【发布时间】：2020-05-24 12:48:31

【问题描述】：

我正在使用返回各种不同键值对的 JSON 的 API。我试图在render() 中将它们显示为一个包含 2 列键和值的表，其中分别包含对象键和值。

fetchBasicDetails() 中的 API 是 POST，它将默认 this.state 值作为输入并返回 JSON 输出。 然后使用 setState 方法将 JSON 输出对象存储到 this.state 的 birth_details 属性中。 然后，我尝试使用forEach 和Object.keys 显示<table> 标记中的对象数据，结果什么也没显示。

感谢任何帮助。谢谢。

export default class HoroscopeReport extends React.Component 
  constructor(props) 
    super(props);

    this.state = 
      day: 11,
      month: 2,
      year: 2019,
      hours: 12,
      minutes: 59,
      tzone: 5.5,
      lat: 19.22,
      lon: 25.2,
      birth_details:
    ;
  

  handleSubmit = event => 
    event.preventDefault();
    //console.log("Received user submitted data"+JSON.stringify(this.state))
    this.fetchBasicDetails();
  ;

  fetchBasicDetails() 
        let myHeaders = new Headers();
        myHeaders.append("Content-Type", "application/x-www-form-urlencoded");
        myHeaders.append("Authorization", "Basic XXXXXXXXXXXXXXX");

        let urlencoded = new URLSearchParams();
        urlencoded.append("day", this.state.day);
        urlencoded.append("month", this.state.month);
        urlencoded.append("year", this.state.year);
        urlencoded.append("hour", this.state.hours);
        urlencoded.append("min", this.state.minutes);
        urlencoded.append("lat", this.state.lat);
        urlencoded.append("lon", this.state.lon);
        urlencoded.append("tzone", this.state.tzone);

        let requestOptions = 
          method: 'POST',
          headers: myHeaders,
          body: urlencoded,
          redirect: 'follow'
        ;

        fetch("https://json.astrologyapi.com/v1/birth_details", requestOptions)
          .then(response => response.text())
          .then(result => 
            this.setState( birth_details: result );
          )
          .catch(error => console.log('error', error));
       

  render() 

    return (
      <div>
/* FORM SUBMITTION CODE HERE */
              <h2>Output:-</h2>
              <table border=2 cellPadding=5>
                <thead>
                  <tr>
                    <td>Key</td>
                    <td>Value</td>
                  </tr>
                </thead>
                <tbody>
                  Object.keys(this.birth_details).forEach(function (element) 
                  return <tr><td>element</td><td>this.birth_details[element]</td></tr>;
                  );
                </tbody>
              </table>
      </div>
    );
  

供参考，这是JSON的输出：-

"year":2019,"month":2,"day":11,"hour":12,"minute":59,"latitude":19.22,"longitude":25.2,"timezone":5.5,"gender":" ","name":" ","seconds":0,"ayanamsha":24.124044280610406,"sunrise":"10:19:50","sunset":"21:47:13"

【参考方案1】：

通常在 React 中基于数组呈现元素是使用 map() 而不是 forEach() 处理的。原因是使用map()，您可以在迭代的同时操作每个元素，并为render 方法返回完全适合的JSX 语法。同时forEach()不返回任何东西，只返回undefined。

我猜你可以尝试以下方法：

render() 
    return (
      <div>
        <h2>Output:-</h2>
        <table border=2 cellPadding=5>
           <thead>
              <tr>
                <td>Key</td>
                <td>Value</td>
              </tr>
           </thead>
           <tbody>
              
                  this.state.birth_details && 
                  Object.keys(this.state.birth_details).map(function (element) 
                     return <tr>
                       <td>element</td>
                       <td>this.state.birth_details[element]</td>
                     </tr>;
                  );
              
           </tbody>
        </table>
      </div>
    );

希望对你有帮助！

【讨论】：

糟糕，我没有注意到您发布了答案！我猜在移动设备上发帖的缺点：o)

@cubrr 没问题，会发生这种情况。 :)

【参考方案2】：

请记住，您需要在 JSX 中使用花括号来表示您要呈现值，而不是将代码原样呈现为文本。

您还需要使用map 而不是forEach。 map 用于将数组转换为其他内容（我们获取字符串列表并将它们映射到 React 元素），而 forEach 用于仅对每个元素执行某些操作而不返回任何内容。

另外，您可能指的是this.state.birth_details 而不是this.birth_details>

<tbody>

  Object.keys(this.state.birth_details).map(function (element) 
    return (
      <tr key=element>
        <td>element</td>
        <td>this.state.birth_details[element]</td>
      </tr>
    );
  )

</tbody>

我还在返回的元素上设置了key。阅读有关 React here 中列表和键的更多信息。

【讨论】：

虽然这肯定有助于打印对象数据，但它是按字符打印的！也就是说，键值列中的输出类似于0 , 1 ", 2 y, 3 e, 4 a, 5 r

@VaibhavDwivedi 在您进行提取的代码中，将response => response.text() 更改为response => response.json()。

这会为您解析 JSON，因为目前您只是将 JSON 作为字符串而不是对象。