In react stock quote data is pulled from an api which returns JSON and I can get the JSON displayed in my react app.

How can I convert the JSON data to look like this on my React page:

Market Summary > T $20.56

?

All I need to display is "symbol" and "ap".

From the following:

Market Summary >

{
  "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"
  }
}

Where should I add the code that was provided in the answer? (sorry totally new to react)

My code is as follows:

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

CodePudding user response：

First you Need to parse your json by using JSON.parser(your_json) after that you can get what you want form json.

Like as you shown above : Market Summary > T $20.56

you can retrieve this data like this :

1. Assume that your json came in json varible
2. Now create a varible (assume requiredData) with value empty string.
3. Now set the value to new varible (requiredData) as shown :

  let serverJson = json.text();
  let myjson = json.parser(serverJson);
  let requiredData = "";
  
  requiredData = `Market Summary > ${myjson.symbol} $ ${myjson.quote.ap}`
  console.log(requiredData);

This is full explanation and code.

CodePudding user response：

I think this should work.

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

Please consider learn react again with this tutorial