Блог

Я хочу, чтобы дата и ставки, относящиеся к этой дате, были помещены в таблицу. Исходный набор данных тот же, только в нем гораздо больше дат, содержащих ставки, поэтому я не могу просто получить к нему доступ, используя точечную нотацию.

         const json = [
            {
                _id: '5f746f892103e3371429dcd0',
                date: '2020-05-05T00:00:00.000Z',
                rates: {
                    CAD: 1.5201,
                    HKD: 8.4057,
                    ISK: 159.3,
                    PHP: 54.863,
                    DKK: 7.4612,
                    HUF: 350.27,
                    CZK: 26.978,
                    AUD: 1.6825,

                },
                __v: 0,
            },
            {
                _id: '5f746f892103e3371429dd6f',
                date: '2020-05-04T00:00:00.000Z',
                rates: {
                    CAD: 1.539,
                    HKD: 8.4838,
                    ISK: 159.5,
                    PHP: 55.379,
                    DKK: 7.4622,
                    HUF: 353.27,
                    CZK: 27.119,
                },
                __v: 0,
            },
        ];
  

Я сделал это, чтобы решить проблему

Это немного отличается, но имеет схожую логику и функции отображения

 import React from 'react';

function App() {

  const json = [
    {
      _id: '5f746f892103e3371429dcd0',
      date: '2020-05-05T00:00:00.000Z',
      rates: {
        CAD: 1.5201,
        HKD: 8.4057,
        ISK: 159.3,
        PHP: 54.863,
        DKK: 7.4612,
        HUF: 350.27,
        CZK: 26.978,
        AUD: 1.6825,

      },
      __v: 0,
    },
    {
      _id: '5f746f892103e3371429dd6f',
      date: '2020-05-04T00:00:00.000Z',
      rates: {
        CAD: 1.539,
        HKD: 8.4838,
        ISK: 159.5,
        PHP: 55.379,
        DKK: 7.4622,
        HUF: 353.27,
        CZK: 27.119,
      },
      __v: 0,
    },
  ];

  return (
    <div className="App">
      {json.map(obj => (
        <div key={obj._id} >
          {/* {console.log(Object.keys(obj.rates))} */}
          {console.log(`Rates for object ${obj._id}`)}
          {obj.date} -
          {Object.keys(obj.rates).map(rate => (
            <div key={rate} >
              {console.log(`Rate is ${rate} and value is ${obj.rates[rate]}`)}
              {rate} : {obj.rates[rate]},
            </div>
          ))}
          {console.log("n")}
          <br />
        </div>
      ))}
    </div>
  );
}

export default App;
  

Это точный ответ (я думаю)

 import React from 'react';

function App() {

  const json = [
    {
      _id: '5f746f892103e3371429dcd0',
      date: '2020-05-05T00:00:00.000Z',
      rates: {
        CAD: 1.5201,
        HKD: 8.4057,
        ISK: 159.3,
        PHP: 54.863,
        DKK: 7.4612,
        HUF: 350.27,
        CZK: 26.978,
        AUD: 1.6825,

      },
      __v: 0,
    },
    {
      _id: '5f746f892103e3371429dd6f',
      date: '2020-05-04T00:00:00.000Z',
      rates: {
        CAD: 1.539,
        HKD: 8.4838,
        ISK: 159.5,
        PHP: 55.379,
        DKK: 7.4622,
        HUF: 353.27,
        CZK: 27.119,
      },
      __v: 0,
    },
  ];

  let allRates = []

  json.map(obj => {
    Object.keys(obj.rates).map(rate => {
      allRates.push(rate)
    })
  })

  allRates = [...new Set(allRates)]
  console.log(allRates)

  return (
    <div className="App">
      <table>
        <tr>
          <th>
            Date
          </th>
          {allRates.map(rate => (
            <th>
              {rate}
            </th>
          ))}
        </tr>
        {json.map(obj => (
          <tr>
            <td>{obj.date}</td>
            {allRates.map(rate => (
              <td>{obj.rates[rate]}</td>
            ))}
          </tr>
        ))}
      </table>
    </div>
  );
}

export default App;
  

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

Кроме того, вы сказали поместить его в таблицы

Я сделал самый простой способ таблиц

Если вы хотите что-то еще, пожалуйста, ответьте или прокомментируйте

Проверьте это (это полезно)

Я старался изо всех сил

Я надеюсь, что это ответит на ваш вопрос