0

I am attempting to use a direct fetch to JSON.server to retrieve a basic package to load some simple components. When I run this script in Firefox. I get a "Network Error when attempting to fetch the resource" but cannot find any 400 errors in the network connection itself. My question is, what would cause this kind of breakdown? as the rest of the page loads fine when called.

Edit 1: it is specifically stating that data.StatusComponent is undefined.

  import React, { Component } from 'react';
import '../HeaderBar/HeaderBar.css';
import 'whatwg-fetch';
type StatusBarProps = {};
type StatusBarState = {
    launch_timer: boolean;
    foreGroundTimer: number;
    // tslint:disable-next-line:no-any
    statusBarBlocks: any;
};
class StatusBar extends Component<StatusBarProps, StatusBarState> {
    timerId: number;
    constructor() {
        super();
        this.state = {
            launch_timer: true,
            foreGroundTimer: -1,
            statusBarBlocks: []
        };
    }
    componentDidMount() {
        fetch('http://localhost:5001/StatusComponent').then(results => {
            return results.json();
        }).then(data => {
            let systemOff = 'green';
            let systemOn = 'gray';
            let statusBarBlocks = data.StatusComponent.map((Status) => {
                return (
                    <div className="blockBar" id={Status.id} key={Status.key} style={{ backgroundColor: (this.state.foreGroundTimer >= Status.id) ? systemOff : systemOn }}> {Status.Name} </div>
                );
            });
            this.setState({ statusBarBlocks: statusBarBlocks });
        });
    }
    componentWillUnmount() {
        clearInterval(this.timerId);
    }
    tick() {
        this.setState({ launch_timer: !this.state.launch_timer, foreGroundTimer: (this.state.foreGroundTimer + 1) % 26 });
    }
    render() {

        return (
            <div className="location">
                <div className="col-xs-6">
                    {this.state.statusBarBlocks}
                </div>
            </div>
        );
    }
}
export default StatusBar;
jpearsonNode
  • 61
  • 1
  • 3
  • 13
  • Enter `http://localhost:5001/StatusComponent` in your browser address bar. Do you see a response? – Rick Jolly Nov 06 '17 at 16:53
  • @RickJolly Yes, it is returning a fully formed JSON array. Which is happening through JSON Server. – jpearsonNode Nov 06 '17 at 16:59
  • If you `console.log(data);`, is `data` defined and does it have a `StatusComponent` property? – Rick Jolly Nov 06 '17 at 17:04
  • What's the output of the promise rejection of fetch? – deojeff Nov 06 '17 at 17:37
  • @RickJolly it is returning a series of objects, all of which are correct, but not the parsed object data. When i try to call it under the let statement. it says that data.StatusComponent is undefined – jpearsonNode Nov 06 '17 at 17:48
  • `data.StatusComponent is undefined` is because `data` is likely undefined. Did you `console.log(data)` it to verify? If undefined, then your json is likely malformed. You could paste it in something like https://codebeautify.org/jsonviewer/ or use Postman to inspect. – Rick Jolly Nov 06 '17 at 17:57
  • @RickJolly data is returning the objects correctly, the issue seems to actually be in the let statement. I have switched the keyword "StatusComponenet" with results to test this, and I am still getting data with full results, but when I append data.results I get an unidentified result – jpearsonNode Nov 06 '17 at 18:02
  • Can you please just show me the output of `console.log(data)`? I'm not following what you're saying. – Rick Jolly Nov 06 '17 at 18:07
  • @d30jeff Not sure I totally understand the question, but when I move to chrome. I get "unhandled rejection(TypeError): cannot read property 'map' of undefined – jpearsonNode Nov 06 '17 at 18:07
  • @RickJolly Sure thing. `Array [ Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, 16 more… ]` is the output of just console.log(dat) – jpearsonNode Nov 06 '17 at 18:08
  • Great. So `data` is an array of objects. There is no `StatusComponent` property on `data`. Just do `data.map(Status => ...`. – Rick Jolly Nov 06 '17 at 18:10
  • @RickJolly That worked perfectly, could you move that to an answer so I can accept it? – jpearsonNode Nov 06 '17 at 18:11

1 Answers1

1

If data.StatusComponent is undefined, then either data is undefined or there is no StatusComponent property on data. console.log(data) to verify.

Rick Jolly
  • 2,949
  • 2
  • 23
  • 31