Getting ERROR in React JS: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data?

Question

We are working on Firebase and we want to fetch the firebase data in our react js UI. We have created API for fetching the data in Flask. The flask code is given below

firebase = pyrebase.initialize_app(config) db = firebase.database()

# Receive data from Firebase RealTime Database @app.route("/") def home():
    db_events = db.child().get().val()
    return jsonify(db_events)

Now, the API is called in React JS component, the code is given below:-

      import React, { Component } from 'react';
import Temperature from './components/temperature';

class App extends Component {
  state = {
    contacts: [],
    temperatures: [],
  };

  componentDidMount(){
    fetch('192.168.1.2:5000')
      .then( res => res.json() )
      .then( (data) => {
        this.setState({ contacts: data })
        console.log(data)
      })
      .catch(console.log)
  }

  render() {
    return (
      <div></div>
    );
  }

}

export default App;

But, when we start the server, we got error in console. The error is given below:

SyntaxError: "JSON.parse: unexpected character at line 1 column 1 of the JSON data"

The JSON we are getting from the APIs is given below:

{
    "DHT11": {
        "Humidity": {
            "-LuWFvEpzI9QAu_8eMEr": "49.00%",
            "-LuWHg8WL90DOdkSKd5J": "48.00%",
            "-LuWHmHpZ2veEKk1qqx2": "49.00%",
            "-LuWHpUA9l-W6_ZBUV9W": "49.00%"
        },
        "LED_STATUS": "OFF",
        "Temperature": {
            "-LuWFvMVeyUhfKEpCxqe": "23.00°C",
            "-LuWHgGX-tepMSXLRZiJ": "23.00°C",
            "-LuWHmPdHdgBaQxkSbh4": "23.00°C",
            "-LuWHpb-d4UbkomxayjN": "23.00°C",
            "-LuWHsnQqIeUm1QGtixw": "23.00°C"
       }
    }
}

Why we are getting this error, all the other dummy APIs are working here. When we checked the format of JSON, it is valid. What we are getting from the error is the keys in our JSON format are not supporting.

Please help us to solve the issue. Thank you in advance.

Answer 1

Your Temperature object is missing an ending brace... Also JSON.parse fails for trailing commas... See the corrected JSON below...

{
    "DHT11": {
        "Humidity": {
            "-LuWFvEpzI9QAu_8eMEr": "49.00%",
            "-LuWHg8WL90DOdkSKd5J": "48.00%",
            "-LuWHmHpZ2veEKk1qqx2": "49.00%",
            "-LuWHpUA9l-W6_ZBUV9W": "49.00%"
        },
        "LED_STATUS": "OFF",
        "Temperature": {
            "-LuWFvMVeyUhfKEpCxqe": "23.00°C",
            "-LuWHgGX-tepMSXLRZiJ": "23.00°C",
            "-LuWHmPdHdgBaQxkSbh4": "23.00°C",
            "-LuWHpb-d4UbkomxayjN": "23.00°C",
            "-LuWHsnQqIeUm1QGtixw": "23.00°C"
        }
    }
}