javascript - React 如何解析数据

Question

所以，我必须遍历数据。我可以成功打印“round”值，但无法获得匹配项，它只返回 [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;

Answer 1

您可以通过添加几行代码来访问 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);
}

附言我感觉您的控制台无法打印数组，它会向您显示 [Object object] 消息。尝试打印列表(数组)的特定项目。