Cant get values from object

Question

I know how that stupid, but i dont understand this simple things. I have Object, i need get from object names. But don't understand how to get access to inner values.

I try:

data['name']
data[0]
data[0].name

Every time i get this error:

TypeError: Cannot read property

Thanks anyway.

Upd1:

Then i try:

data.constructor

i get this:

Cannot read property 'constructor' of null

I get data from ajax, from this question When i try:

JSON.parse(data)

I get:

SyntaxError: Unexpected token o in JSON at position 1(…)

That raw data when i get this from server:

{"genres":[{"id":28,"name":"Action"},{"id":12,"name":"Adventure"},{"id":16,"name":"Animation"},{"id":35,"name":"Comedy"},{"id":80,"name":"Crime"},{"id":99,"name":"Documentary"},{"id":18,"name":"Drama"},{"id":10751,"name":"Family"},{"id":14,"name":"Fantasy"},{"id":36,"name":"History"},{"id":27,"name":"Horror"},{"id":10402,"name":"Music"},{"id":9648,"name":"Mystery"},{"id":10749,"name":"Romance"},{"id":878,"name":"Science Fiction"},{"id":10770,"name":"TV Movie"},{"id":53,"name":"Thriller"},{"id":10752,"name":"War"},{"id":37,"name":"Western"}]}

what is `data`? console log `data.constructor` to find out and post it here — Edmund Lee, Oct 24 '16 at 17:58
How are you getting `data`? Some ajax APIs return a response object, and you have to say `response.data...` — mhodges, Oct 24 '16 at 17:58
I think you may have to convert your response to JSON object using JSON.parse(data) — Brandon, Oct 24 '16 at 18:05
The object in the screen shot looks strange: there is no `{}` around the objects contained in the indexes of the array. Could you please type in the array (or part of it) in stead of showing it using a picture? — rabbitco, Oct 24 '16 at 18:43

score 1 · Answer 1 · edited May 23 '17 at 10:30

After reviewing your other question this is your code I'm assuming.

const Main = React.createClass({
    getInitialState : function() {
    return {
      data: null
    };
 },

 componentDidMount: function() {
     var self = this;
     axios.get('https://api')
         .then(function (response) {
            self.setState({data: response.data})
            console.log(response.data);
         })
         .catch(function (error) {
             console.log(error);
         });
        console.log('mount ' + this.state.data );
},
    render() {
        return (
            <h1>{JSON.stringify(this.state.data)}</h1>
        )
    }
})
export default Main;

While you are waiting for the server to come back with the data Main.data equals null. This is why you are getting type of null and if you access data like an array you are getting a type error. You could default Main.data to an empty array while you are waiting for the data to populate.

const Main = React.createClass({
    getInitialState : function() {
    return {
      data: []
    };
 },

As you are using React you will also need to update the component after the data changes. I would suggest looking at this question for that.

Just response from server, dont understand how i cant have access to part of Object. Maybe this problem with axios. — steelRat, Oct 24 '16 at 19:03
Yes, i read how to use ajax in react, how update react components, now everything work great. Thanks. — steelRat, Oct 25 '16 at 22:09

score 0 · Accepted Answer · answered Oct 25 '16 at 22:12

I don't know, why that doesn't work before, but now i get everything what i need. Thanks everybody.

import React from 'react';
    import { render } from 'react-dom';
    import 'whatwg-fetch';

    const Genres = React.createClass({
        getInitialState : function() {
                return {
                    data: []
            };
        },
        componentDidMount: function() {
            fetch('https://api.themoviedb.org/3/genre/movie/list?api_key=')
                 .then(function(response) {
                     return response.json()
                 }).then(function(json) {
                     this.setState({data: json.genres})
                        //console.log('parsed json', json.genres)
                 }.bind(this)).catch(function(ex) {
                     console.log('parsing failed', ex)
                 })
         },

        render() {
            var data = this.state.data.map(function(key){
                                    return <li>{ key.name }</li>
                })
            console.log(data)
            return (
                <div>
                    Genres:{data}
                </div>
            )
        }
     })

    export default Genres;

Please remove this as it is not an answer but a response. – Michael Warner Oct 26 '16 at 13:01 — Michael Warner, Oct 26 '16 at 13:01

Cant get values from object

2 Answers2