使用reactjs渲染表格 [英] Rendering a table using reactjs

问题描述

我从reactjs开始。在使用了React的基础知识之后，我试图在dynamoDB上使用reactjs。我正在处理的第一个查询是 Select 查询，并将表呈现为html文件。所以现在我可以使用 select 查询从所需表中获取json数组。但是我无法以表格格式显示渲染的数据，即我得到如下所示的json数组，并且能够显示数据 4281，taniv，secondary ... ，但无法显示显示每个值（id，名称，类等）的标题，因此如何显示每个json值的标题。我希望它是动态的，因为我想显示数据库中的内容（如果某些属性不存在或缺少，我不想显示它）：

Hi Im starting with the reactjs. After working with the basics in react, Im trying to work on the reactjs with dynamoDB. First query Im working on is Select query, and render the table in html file. So right now Im able to get the json array from desired table using select query. But Im not able display the rendered data in a table format i.e I get a json array like below and able to display data 4281, taniv, secondary... but not able to display the header for each value (id, name, class, etc.), so how to display the header for each json value. I want it to be dynamic because I want to show what is in the db(if some of the attributes are not there or missing I don't want it to be displayed) :

我引用的这个示例旨在从db获取数据

 [
    {
      "id": 4281,
      "name": "taniv",
      "class": "secondary",
      "admission": 227,
      "telephone": "209-109-2322",
      "address": "11 first lane",
      "postCode": "5788009",
      "county": "UK",         
    }]

js

<div id="third" >
                    <label> Result </label>
                    <br />
                    <table>
                        <tbody>
                            <tr>
                                <th>  </th>   
                            </tr>
                            <tr>
                                {data.map((obj, y) => {
                                    return Object.keys(obj).map((x, y) => <td> {obj[x]} </td>)
                                })}    
                            </tr>
                        </tbody>
                    </table>
                    <Paginator>

推荐答案

我做了示例为您提供代码（：

I made an example on codesandbox.io for you (:

试图使您的表完全动态。本质上您希望对象中的键是表标题，而相应的值是表行数据。请查看示例，让我知道这是否有帮助，或者您有任何疑问可以找到我Twitter（@jonmajorc）。祝你好运！

From what I understood you are trying to make your table completely dynamic. You essentially want keys in your object to be table headers and corresponding values to be table row data. Please checkout the example and let me know if this helps or if you have any questions you can find me on Twitter (@jonmajorc). Good luck!

这篇关于使用reactjs渲染表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！