时间戳

首页 > 解决方案 > 如何从 React JS 中的 JSON 对象创建表？

javascript - 如何从 React JS 中的 JSON 对象创建表？

问题描述

我想做的是使用 Propublica 的非营利 API 来获取有关各种非营利组织的信息并在表格中显示某些属性。

现在，我正在获取一个对象：

const [ orgs, setOrgs ] = useState({})

const fetchOrgs = async () => {
    const result = await Axios.get(`${API_URL}?state%5Bid%5D=${query}`)
    setOrgs(result.data.organizations)
  }

根据他们的 API，组织对象是这样的：

{
  "organization":{
    "id":142007220,
    "ein":142007220,
    "name":"PRO PUBLICA INC",
    "careofname":null,
    "address":"155 AVE AMERICA 13 FL",
    "city":"NEW YORK",
    "state":"NY",
    "zipcode":"10013-0000",
    "exemption_number":0,
    "subsection_code":3,
    "affiliation_code":3,
    "classification_codes":"1000",
    "ruling_date":"2008-02-01",
    "deductibility_code":1,
    "foundation_code":15,
    "activity_codes":"0",
    "organization_code":1,
    "exempt_organization_status_code":1,
    "tax_period":"2018-12-01",
    "asset_code":8,
    "income_code":8,
    "filing_requirement_code":1,
    "pf_filing_requirement_code":0,
    "accounting_period":12,
    "asset_amount":40988939,
    "income_amount":27237842,
    "revenue_amount":26685933,
    "ntee_code":"A20",
    "sort_name":null,
    "created_at":"2020-04-13T21:42:55.607Z",
    "updated_at":"2020-04-13T21:42:55.607Z",
    "data_source":null,
    "have_extracts":null,
    "have_pdfs":null
  },

这是我当前的功能，它不起作用：

const displayTable = () => {
    return (
      <Table striped border='true' hover='true' responsive='true'>
        <thead>
          <tr>
            <th>#</th>
            <th>Name</th>
            <th>State</th>
            <th>City</th>
            <th>NTEE</th>
            <th>Income</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>0</td>
            <td>Test</td>
            <td>Test</td>
            <td>Test</td>
            <td>Test</td>
            <td><a href=' '>Link</a></td>
          </tr>
          {Object.keys(orgs).map(({name, state, ntee_code, income_amount}, i) => (
            <tr key={i}>
              <td>{i + 1}</td>
              <td>{name}</td>
              <td>{state}</td>
              <td>{ntee_code}</td>
              <td>{income_amount}</td>
            </tr>
          ))}
        </tbody>
      </Table>
    )
  }

当我运行它时，我得到了测试行，然后是许多行的空单元格。只有“#”列有任何内容，因为它只是索引值。我在这里做错了什么？任何帮助将不胜感激，我才刚刚开始学习 React 和 JS。

标签： javascriptreactjs

解决方案

这是一个工作示例：

  return (
    <div>
      <h1>Organizations:</h1>
      <table style={{ width: '100%', textAlign: 'center', border: 'solid 1px' }}>
        <thead>
          <th>Index</th><th>Name</th><th>State</th><th>ntee_code</th><th>income_amount</th>
        </thead>
        <tbody>
          {orgs.map((organization, i) => {
             const org = organization.organization;
             return (
               <tr>
                 <td>{i}</td><td>{org.name}</td><td>{org.state}</td><td>{org.ntee_code}</td><td>{org.income_amount}</td>
               </tr>
             )
          })}
        </tbody>
      </table>
    </div>
  )

我只发布返回的标记，因为我知道您在获取数据方面没有问题，而您只是不知道如何显示。您的解决方案具有迭代组织数组以创建<tr>s 的正确想法。但是您不需要Object.keys()访问这些值。您首先需要遍历数组中的对象，然后使用以下.语法向下钻取每个对象：const org = organization.organization;然后例如org.name.

请注意，您的每个对象实际上只有一个字段，即organization，因此您首先需要深入研究它，然后才能在对象树的下方进一步获取值。如果您想在其中解构对象map()，并且再次对它的完成方式有正确的想法，那么您只是弄错了层。所以你可以做

{orgs.map(({organization}, i) => {
  const { name, state, ntee_code, income_amount } = organization;
  return (
    <tr>
      <td>{i}</td><td>{name}</td><td>{state}</td><td>{ntee_code}</td><td>{income_amount}</td>
    </tr>
  )
})}

我希望它可以提供帮助，一切都很清楚。祝你好运！

推荐阅读