Рендеринг массива объектов React

Question

Мой локальный JSON файл выглядит следующим образом

[
   { "time": "2017", "Id": 1, "value": 40 },
   { "time": "2018", "Id": 1, "value": 65 },
   { "time": "1018", "Id": 1, "value": 34 }
]

Я импортировал JSON как:

import * as readings from '../data/readings';

И я хочу представить свои данные в виде списка в Реактив компонента.

Вот что я попробовал:

import * as readings from '../data/readings';

class Table extends Component {

  render (){

        const data = Object.keys(readings).map((row, index) =>
                    <li key={index}> {row} </li>);
        return (
              <div>
                <ul>
                  {data}
                </ul>
              </div>
            );
  }
}

export default Table;

После рендеринга этого компонента я увижу «по умолчанию» на экране, но моя цель состоит в том, чтобы каждый объект был в одном строка как:

• "время": "2017", "Id": 1, "значение": 40
• "время": "2018", "Id": 1 , "значение": 65
• "время": "1018", "Id": 1, "значение": 34

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

Редактировать :

Мои данные - это сам массив, но импорт дает его как объект. Вот почему я использую Object.keys, а не readings.map

Answer 1

readings сам по себе массив, поэтому вы хотите отобразить: readings.map(). Элементы в нем - это объекты, которые вы хотите отобразить, поэтому вы можете использовать Object.keys(). Поскольку вы также хотите использовать значения, Object.entries() немного более читабелен.

Кроме того, вы импортируете данные из файла JSON, поэтому следует импортировать данные, как если бы это был экспорт по умолчанию. Вы должны явно указать тип файла .json, поскольку это не файл .js.

import readings from '../data/readings.json';

class Table extends Component {

  render() {
    const data = readings.map((reading, index) => {
      const readingData = Object.entries(reading).map((k, v) => <span>{k}: {v}</span>);
      return <li>{readingData}</li>;
    };

    return (
      <div>
        <ul>
          {data}
        </ul>
      </div>
    );
  }
}

export default Table;

Answer 2

Ваш readings это не объект, это массив! Итак, что вам нужно сделать, это перебрать его, и для каждого внутреннего объекта выполните процесс Object.keys(readings).map()

import * as readings from '../data/readings';

class Table extends Component {

  render (){

        const data = readings.map((row, index) => 
          <li key={index}>
            {
             Object.keys(row).map(e =>   
            `${e[0]: e[1],} `
            }
          )
          </li>
        )

        return (
              <div>
                <ul>
                  {data}
                </ul>
              </div>
            );
  }
}

export default Table;

Answer 3

Ваши readings данные уже Array. Вы можете напрямую использовать map на нем.

import * as readings from '../data/readings';

class Table extends Component {

  render (){


      const readingsArray = Object.keys(readings).map(key => readings[key]);
      const data= readingsArray.map(obj => <li>{JSON.stringify(obj)}</li>);

        return (
              <div>
                <ul>
                  {data}
                </ul>
              </div>
            );
  }
}

export default Table;