Как отобразить JSON данные внутри рендеринга в виде таблицы в React - PullRequest
Новая
       5

Как отобразить JSON данные внутри рендеринга в виде таблицы в React

0 голосов
/ 08 февраля 2020

Я использую API, который возвращает JSON различных пар ключей и значений. Я пытаюсь отобразить их внутри render() в виде таблицы из 2 столбцов, ключ и значение, с ключами объекта и значениями в них, соответственно.

  1. API в fetchBasicDetails() - это POST, который принимает значения this.state по умолчанию в качестве входных данных и возвращает вывод JSON.
  2. Объект вывода JSON затем сохраняется в birth_details свойство this.state с использованием метода setState.
  3. Затем я попытался отобразить данные объекта в тегах <table> с использованием forEach и Object.keys, которые ничего не показывают совсем.

Любая помощь приветствуется. Спасибо. 

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"}

Ответы [ 2 ]

0 голосов
/ 08 февраля 2020

Помните, что вам нужно использовать фигурные скобки в 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 здесь .

0 голосов
/ 08 февраля 2020

Обычно элементы рендеринга на основе массива в React обрабатываются с map() вместо forEach(). Причина в том, что с map() вы можете манипулировать каждым элементом во время итерации и возвращать полностью подходящий JSX синтаксис для метода render. В то же время 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>
    );
}

Надеюсь, это поможет!

...