reactjs - 使用 JSON 数据中的特定元素并将其显示在 React 页面上?

在 react 中,股票报价数据是从返回 JSON 的 api 中提取的,我可以在我的 react 应用程序中显示 JSON。

如何在我的 React 页面上将 JSON 数据转换为如下所示:

市场总结 > T $20.56

?

我只需要显示“符号”和“ap”。

从以下:

市场摘要 >

{
  "symbol": "T",
  "quote": {
    "t": "2022-05-17T20:34:27.427150733Z",
    "ax": "V",
    "ap": 20.56,
    "as": 1,
    "bx": "V",
    "bp": 20.4,
    "bs": 50,
    "c": [
      "R"
    ],
    "z": "A"
  }
}

我应该在哪里添加答案中提供的代码? (对不起,对 react 来说是全新的)

我的代码如下:

state = {
    value: [],
    quotes: []
}

componentDidMount() {
    // axios.get(`http://localhost/php-rest-api/api/getstockprice.php?stock_ticker=GME`)
    //     .then(res => {
    //         const quotes = res.data;
    //         this.setState({ quotes });
    //     })
}

handleChange(event) {
    this.setState({value: event.target.value});
}

handleSubmit(event) {
    const ticker = {
        name: this.state.value
    }
    const url = 'http://localhost/php-rest-api/api/getstockprice.php?stock_ticker=';
    const urlwithticker = url + ticker.name;
    console.log(ticker.name)
    axios.get(urlwithticker)
        .then(res => {
            const quotes = res.data;
            this.setState({ quotes });
        })
   // alert('Stock ticker was submitted: ' + this.state.value);
    event.preventDefault();
}

constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
}

render() {
    return (
        <div>
            <form onSubmit={this.handleSubmit}>
                <label>
                    Stock > &nbsp;
                    <input type="text" value={this.state.value} onChange={this.handleChange} />
                </label>
            </form>
            {console.log(this.state.quotes)}
            Market Summary > &nbsp;
            <div><pre>{JSON.stringify(this.state.quotes, null, 2) }</pre></div>
        </div>
    )
}

displayquotes() {
    var quotestring = JSON.stringify(this.state.quotes, 2);
    var jsonobject = JSON.parse(quotestring);
    console.log(jsonobject['symbol'])
}

回答1

我认为这应该有效。

state = {
    value: [],
    quotes: []
}

componentDidMount() {
    // axios.get(`http://localhost/php-rest-api/api/getstockprice.php?stock_ticker=GME`)
    //     .then(res => {
    //         const quotes = res.data;
    //         this.setState({ quotes });
    //     })
}

handleChange(event) {
    this.setState({value: event.target.value});
}

handleSubmit(event) {
    const ticker = {
        name: this.state.value
    }
    const url = 'http://localhost/php-rest-api/api/getstockprice.php?stock_ticker=';
    const urlwithticker = url + ticker.name;
    console.log(ticker.name)
    axios.get(urlwithticker)
        .then(res => {
            const quotes = res.data;
            this.setState({ quotes });
        })
   // alert('Stock ticker was submitted: ' + this.state.value);
    event.preventDefault();
}

constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
}

render() {
    return (
        <div>
            <form onSubmit={this.handleSubmit}>
                <label>
                    Stock > &nbsp;
                    <input type="text" value={this.state.value} onChange={this.handleChange} />
                </label>
            </form>
            Market Summary > {this.state.quotes ? `${this.state.quotes.symbol} $ ${this.state.quotes.quotes.ap}`: 'fetch data'}
            
        </div>
    )
}

请考虑通过这个https://www.youtube.com/watch?v=4UZrsTqkcW4重新学习react

回答2

首先,您需要使用 JSON.parser(your_json) 解析您的 json,然后您可以从 json 中获取您想要的内容。

如上图所示:市场摘要 > T $20.56

您可以像这样检索这些数据:

  1. 假设你的儿子进来了 json 变量
  2. 现在创建一个带有 value 空字符串的变量(假设需要数据)。
  3. 现在将 value 设置为新变量(必需数据),如图所示:
let serverJson = json.text();
  let myjson = json.parser(serverJson);
  let requiredData = "";
  
  requiredData = `Market Summary > ${myjson.symbol} $ ${myjson.quote.ap}`
  console.log(requiredData);

这是完整的解释和代码。