javascript - 如何映射外部 JSON 数据？

Question

我已将 JSON 数据保存为 profiledata.js 文件。我想映射每个对象并将其显示在页面上。我知道 .map() 函数仅适用于 array 而不是 objects。因此，我创建了对象数组，但仍然无法使用 .map() 在页面上显示数据。

profiledata.js:

const profiledata = [  {
        "_id": {
          "_str": "5b0761dc88430400064d9a31"
        },
        "batting": {
          "_id": {
            "_str": "54cc1859ce17393ab3219eda"
          },
          "avgRate": 43,
          "centuries": 0,
          "halfCenturies": 0,
          "highestScore": 43,
          "notOut": 0,
          "numInnings": 1,
          "numMatches": 1,
          "strikeRate": null,
          "teamid": {
            "_str": "54cc196cce17393ab321a9e6"
          },
          "totalBalls": 18,
          "totalFours": 2,
          "totalPoints": 78,
          "totalRuns": 43,
          "totalSixes": 5
        },
        "bowling": {
          "_id": {
            "_str": "54cc1859ce17393ab3219eda"
          },
          "bestInnings": {
            "runs": 39,
            "wickets": 0
          },
          "numMatches": 1,
          "runRate": 6.5,
          "totalBalls": 0,
          "totalMaidens": 0,
          "totalNoBalls": 1,
          "totalOvers": 6,
          "totalPoints": 5,
          "totalRuns": 39,
          "totalWickets": 0,
          "totalWides": 0
        },
        "division": "A",
        "fielding": [],
        "matches": 1,
        "player": {
          "_str": "54cc1859ce17393ab3219eda"
        },
        "points": 83,
        "season": "2018",
        "team": {
          "_str": "54cc196cce17393ab321a9e6"
        },
        "tournament": {
          "_str": "f4e8a58fd0d90574856d1a46"
        },
        "tournamentString": "f4e8a58fd0d90574856d1a46"
      },
    {},
    {},
    ....
    ];

    export default profiledata;

图表.js:

import React, { Component } from 'react';
import profiledata from './profiledata';


class Chart extends Component {

  render(){
    return(
      <div>
          {profiledata.map( newdata => {
            return(
              <div>
            <li> {newdata._id}</li>
              </div>
            );
          })}

      </div>
    )}

}

export default Chart;

我正在尝试使用 .map() 显示每个对象的 _id。我将 profiledata 导入到名为 chart.js 的组件中。检查截图:

Answer 1

导入配置文件数据时添加.js。 替换这一行

import profiledata from './profiledata';

至

import profiledata from './profiledata.js';