0

I am requesting json data from a db using axios with react. I am able to get the json and assign it to state and pass it as props to child components in my app. The problem I am having is that some of the objects in the json begin with an '@' symbol and throw a syntax error.

    var Events = React.createClass({
    getInitialState: function() {
    return {
      events: [],
    }
  },
  componentDidMount: function() {
    var _this = this;
    this.serverRequest = 
      axios
        .get("MY URL STRING HERE")
        .then(function(result) {
          _this.setState({
            events: result.data
          });
        })
  },
  componentWillUnmount: function() {
    this.serverRequest.abort();
  },
    render: function() {
        return (
            <div>
                {this.state.events.map(function(event) {
                    return (
                        <div>
                            <Event title={event.EventTitle} date={event.EventDate} description={event.EventDescription} presentor={event.EventPresenters} location={event.EventLocation} registered={event.registeredusercount} max_reg={event.EventMaximumAttendees} key={event.@unid} id={key} status={event.status} />
                        </div>
                    ) 
                })};
            </div>
        )
    }
});
Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
jordanpowell88
  • 857
  • 3
  • 11
  • 25
  • FYI, your problem has nothing to do with JSON. The data is already parsed, so your problem is with a JavaScript object containing `@` in one of its properties. The problem is not specific to React either. – Felix Kling Dec 08 '16 at 19:46

1 Answers1

1

I'm assuming your issue isn't with parsing the data, but with React passing the objects down as props? If so, you should be able to access the attributes via string dynamically with bracket notation, like so.

let foo = {'@bar': 'test'};
foo.@bar;
// => Uncaught SyntaxError: Invalid or unexpected token

foo['@bar'];
// => 'test'

For your component, it would be:

<Event key={event['@unid']} />
BradByte
  • 11,015
  • 2
  • 37
  • 41