Rendern einer Tabelle mit reactjs

Question

Hi ich beginnend mit den reactjs. Nachdem ich mit den Grundlagen der Reaktion gearbeitet habe, versuche ich mit dynamoDB an den reactjs zu arbeiten. Erste Abfrage Ich arbeite an ist Select Abfrage, und rendern die Tabelle in HTML-Datei. So im Moment kann ich das JSON-Array von der gewünschten Tabelle mit select Abfrage abrufen. Aber ich kann die gerenderten Daten nicht in einem Tabellenformat anzeigen, dh ich bekomme ein JSON-Array wie unten und kann Daten anzeigen 4281, taniv, secondary... aber nicht in der Lage, die Überschrift für jeden Wert (ID, Name, Klasse, etc.) anzuzeigen, so wie Zeigen Sie die Überschrift für jeden JSON-Wert an. Ich will es dynamisch sein, weil ich zeigen will, was in der db (wenn einige der Attribute nicht da sind oder fehlen Ich will es nicht angezeigt werden):

This an example I refered to get the data from 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> 

Answer 1

ich machte ein example auf codesandbox.io für Sie (:

Von dem, was ich verstehe Sie versuchen, Ihren Tisch vollständig zu machen dynamisch. Im Wesentlichen möchten Sie, dass Schlüssel in Ihrem Objekt Tabellenkopfzeilen und entsprechende Werte Tabellenzeilendaten sind. Bitte überprüfen Sie das Beispiel und lassen Sie mich wissen, ob dies hilfreich ist oder wenn Sie Fragen haben, können Sie mich auf Twitter (@jonmajorc) finden. Viel Glück!