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

Question

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

我如何将JSON数据转换成这样在我的React页面上:

市场总结>20.56新台币

?

我只需要显示"symbol"one_answers"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"
}
}

我应该在哪里添加答案中提供的代码?(对不起，完全没有反应)

我的代码如下:

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'])
}

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

请考虑在本教程中再次学习react

Answer 2

首先你需要使用json. parser(your_json)来解析json，然后你可以从json中得到你想要的。

就像你上面显示的那样:市场总结>20.56新台币

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

1. 假设你的json来自json变量
2. 现在创建一个值为空字符串的变量(假设requiredData)。
3. 现在设置值为新变量(requiredData)，如下所示:

let serverJson = json.text();
let myjson = json.parser(serverJson);
let requiredData = "";

requiredData = `Market Summary > ${myjson.symbol} $ ${myjson.quote.ap}`
console.log(requiredData);

这是完整的解释和代码。