在 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 >
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
</form>
{console.log(this.state.quotes)}
Market Summary >
<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 >
<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
您可以像这样检索这些数据:
- 假设你的儿子进来了 json 变量
- 现在创建一个带有 value 空字符串的变量(假设需要数据)。
- 现在将 value 设置为新变量(必需数据),如图所示:
let serverJson = json.text();
let myjson = json.parser(serverJson);
let requiredData = "";
requiredData = `Market Summary > ${myjson.symbol} $ ${myjson.quote.ap}`
console.log(requiredData);
这是完整的解释和代码。