反应如何解析数据

时间:2018-07-09 22:20:02

标签: javascript json reactjs typescript

因此,我必须遍历数据。我可以成功打印“回合”值,但无法获得匹配项,它仅返回[object Object]。 如何获取比赛数据?

我是映射新手,还是React的新手,我已经尝试了一切。我只想知道如何从匹配项中打印值。

顺便说一下,这是Json文件:https://s3.eu-central-1.amazonaws.com/js-assignment/data.json

import * as React from "react";
import "./App.css";

import logo from "./logo.svg";

class App extends React.Component {
  private data = require("./data.json");

  public constructor(props: Readonly<{}>) {
    super(props);
  }

  public componentDidMount() {
    this.getFootBallRounds();
  }

  public render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.tsx</code> and save to reload.
        </p>
      </div>
    );
  }

  private getFootBallRounds() {
    const data = require("./data.json"); // forward slashes will depend on the file location

    for (let i = 0; i < data.length; i++) {
      const obj = this.data[i];

      console.log("Round: " + obj.round);
    }
  }
}

export default App;

1 个答案:

答案 0 :(得分:2)

您可以通过添加几行来访问this.data的项目。

for (let i = 0; i < data.length; i++) {
  const obj = this.data[i];

  for(let j = 0; j < data[i].matches.length; j++) {
    console.log(data[i].matches[j]); // <- Here is your item
  }

  console.log("Round: " + obj.round);
}

P.S。我感觉您的控制台无法打印数组,并且显示[Object object]消息。尝试打印列表中的特定项目(数组)。