时间戳

首页 > 解决方案 > React 如何解析数据

javascript - React 如何解析数据

问题描述

所以，我必须遍历数据。我可以成功打印“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;

标签： javascriptjsonreactjstypescript

解决方案

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);
}

PS 我觉得您的控制台无法打印数组，它会显示 [Object object] 消息。尝试打印列表（数组）中的特定项目。

推荐阅读