Extracting data from a dictionary in react js

Question

I've output data in json from my api formatted in a dictionary, I want a value e.g intensity0 for each frame_number. How do I do this in react js i've tried multiple things but i cant seem to get it. You can see my attempt in render part.

import "bootstrap/dist/css/bootstrap.css";   

import React from "react";    
import Buttons_Footer from "./components/Buttons_Footer.js";
import LeftPane from "./components/LeftPane.js"
//import './App.css';
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { apiResponse: "" };

  }
  // Comunicate with API
  callAPI() {
    fetch("http://localhost:9000/IntensityAPI") //React app talks to API at this url
      .then(res => res.text())
      .then(res => this.setState({ apiResponse: res }));
  }
  componentWillMount() {
    this.callAPI();
  }
  render() {
    return (

      <div className="App">
      <ul>
      {this.state.apiResponse.map(function(item,index){
        return (<div><h1>{item.frame_number}</h1></div>)
      })}
      </ul>
        <header className="App-header">
          <p></p>
          <div class="row fixed-bottom no-gutters">
            <div class="col-3 fixed-top fixed-bottom">

              <LeftPane></LeftPane>
            </div>
            <div class="offset-md-3" >

            </div>
          </div>
        </header>
      </div>
    );
  }
}
export default App;

[{"frame_number": 1, "roi0": [101.78202823559488, 99.39509279584912, 49.546951219239915, 29.728170731543948], "intensity0": 80.0, "roi1": [101.78202823559488, 99.39509279584912, 49.546951219239915, 29.728170731543948], "intensity1": 157.0},
{"frame_number": 2, "roi0": [102.56623228630755, 97.95906005049548, 50.25603182631066, 30.153619095786393], "intensity0": 80.0, "roi1": [102.56623228630755, 97.95906005049548, 50.25603182631066, 30.153619095786393], "intensity1": 158.0},
{"frame_number": 3, "roi0": [103.39336535376313, 98.20468223716023, 49.58465295946593, 29.750791775679556], "intensity0": 80.0, "roi1": [103.39336535376313, 98.20468223716023, 49.58465295946593, 29.750791775679556], "intensity1": 157.0}, ... etc

Burak Gavas · Accepted Answer · 2020-03-17 15:01:53Z

1

Instead of this.state = { apiResponse: "" }; use this.state = { apiResponse: [] };

Parse data as json. Instead of .then(res => res.text()) use .then(res => res.json())

answered Mar 17, 2020 at 15:01

Burak Gavas

1,3421 gold badge11 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sue Over a year ago

That worked! It isnt giving me a error anymore, however its not printing the h1. Any suggestions?

Burak Gavas Over a year ago

Actually you should see it. Can you try printing a constant inside h1?

Collectives™ on Stack Overflow

Extracting data from a dictionary in react js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related