Блог

У меня есть довольно четкая функция объекта и карты в react js.

Мои данные находятся в переменной состояния this.state.response

 response = [
    {
        "number": "CA1",
        "name": "Kiran",
        "type": "Books",
        "contact": "98989898"
    },
    {
        "number": "CA2",
        "name": "Rahul",
        "type": "MP3",
        "contact": "98989898"
    }
]  
 

amp; Здесь я хочу распечатать данные в таблице в файле react jsx

 {
    this.state.response !== "" amp;amp;
    this.state.response.map((data, i) => (
        <tr key={i}>
            <td>{i 1}</td>
            {
                console.log("Here I want to print data");
            }
            <td></td>
        </tr>
    ))
}
 

Я могу получить доступ к каждым данным с помощью {data.number} или {data.name}

Но я не знаю таких ключей, как номер, имя или тип в ответе, который представляет собой динамические данные из API.

Поэтому мой вопрос заключается в том, как я могу создать несколько со значением данных из ответа.

Используйте метод Object.keys() для получения массива ключей в данном объекте

 {
    this.state.response !== "" amp;amp;
    this.state.response.map((data, i) => (
        <tr key={i}>
            <td>{i 1}</td>
            {
                Object.keys(data) //Returns array of all keys: Array ["number", "name", "type", "contact"]
            }
            <td></td>
        </tr>
    ))
}
 

Object.values будет loop через количество значений в data и показывать их в td теге

 this.state.response.map((data, i) => (
    <tr key={i}>
       <td>{i 1}</td>
       {Object.values(data).map(val => {
             return <td>{val}</td>;
           })
        }
    </tr>
));
 

Чтобы получить keys вместе с values тем, что вам придется использовать Object.entries .

     this.state.response.map((data, i) => (
        <tr key={i}>
           <td>{i 1}</td>
           {Object.entries(data).map(val => {
             return <div>
               <td>{val[0]}</td><td>{val[1]}</td>
               <br />
             </div>
               })
            }
        </tr>
    ))
 

Object.entries вернет все свойства и значения в виде ключей и значений в массиве, Object.keys вернет все свойства в массиве и Object.values вернет все значения в массиве

 this.state.response.map((data, i) => (
        <tr key={i}>
            <td>{i 1}</td>
            {
                console.log(Object.entries(data));
                Object.values(data).map(d => <td>{d}</td>);
            }
            <td></td>
        </tr>
 

Вы можете получить ключи от объекта с помощью Object.keys(object) . После этого вы можете просмотреть ключи и получить доступ к каждому ключу на каждом объекте.

 class ResponseTable extends React.Component {
  state = { 
    response: [{
      "number": "CA1",
      "name": "Kiran",
      "type": "Books",
      "contact": "98989898"
    }, {
      "number": "CA2",
      "name": "Rahul",
      "type": "MP3",
      "contact": "98989898"
    }]
  };
  
  render() {
    const keys = Object.keys(this.state.response[0]);
  
    return (
      <table>
        <thead>
          <tr>{keys.map(key => <th key={key}>{key}</th>)}</tr>
        </thead>
        <tbody>
          {this.state.response.map((item, index) => (
            <tr key={index}>
              {keys.map(key => <td key={key}>{item[key]}</td>)}
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
}

ReactDOM.render(
  <ResponseTable />,
  document.querySelector("#response-table-container")
); 

 <script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<div id="response-table-container"></div> 

Обратите внимание, что это решение используется this.state.response[0] для определения ключей. Если этот массив может быть пустым, вам, возможно, потребуется установить какое-то значение по умолчанию, потому this.state.response[0] что будет оцениваться undefined .

В этом сценарии одним из решений было бы использовать пустой объект по умолчанию:

 Object.keys(this.state.response[0] || {})
 

Который вернет пустой массив, если ответ будет пустым. Но вы также можете отобразить сообщение, уведомляющее пользователя о пустых результатах.

 if (this.state.response.length == 0) {
  return <div>Nothing found</div>;
}
 

Это всего лишь примеры, и вам придется самим определить, что вы хотите делать в таком сценарии. Если этот сценарий никогда не произойдет, вам не придется с ним справляться.