How to understand the error "TypeError: Cannot read property 'id' of undefined"?

Question

I'm trying to understand basic concept here. I know this is a common problem and pretty sure there's a simple explanation which I don't seem to get. Here I'm trying to access the different properties of my object which I'm unable to do so.

Below is my array output using console.log(val);

When I try this console.log(val[0]); the output is:

Just getting first object in that array.

Now if I try console.log(val[0].id); I get:

Also checked for keys usingconsole.log(Object.keys(val)); and stringify using console.log(JSON.stringify(val[0]));

But if I try the exact same processes in chrome console, I get what I need shown

This is a React application. I've tried this in VS Code and PyCharm editors as well. I'm sure I'm missing something simple.

Update

I have added my data and steps taken to arrive a the problem.

"variants": [
  {
    "id": 6989569458233,
    "price": "68.00",
    "option1": "color-1",
    "option2": "32",
    "inventory_quantity": 764
  },
  {
    "id": 6989569491001,
    "price": "68.00",
    "option1": "color-1",
    "option2": "32F",
    "inventory_quantity": 158
  },
  {
    "id": 4615727513637,
    "price": "68.00",
    "option1": "color-1",
    "option2": "34D",
    "inventory_quantity": 5
  },
  {
    "id": 4615727906853,
    "price": "68.00",
    "option1": "color-1",
    "option2": "38E",
    "inventory_quantity": 6
  },
  {
    "id": 6989722583097,
    "option1": "color-2",
    "option2": "32E",
    "price": "68.00",
    "inventory_quantity": 1109
  },
  {
    "id": 6989722615865,
    "option1": "color-2",
    "option2": "32F",
    "price": "68.00",
    "inventory_quantity": 1109
  },
  {
    "id": 4615861469221,
    "price": "68.00",
    "option1": "color-2",
    "option2": "34D",
    "inventory_quantity": 1797
  },
  {
    "id": 6989722648633,
    "price": "68.00",
    "option1": "color-2",
    "option2": "34E",
    "inventory_quantity": 0
  },
  {
    "id": 6989722648633,
    "price": "68.00",
    "option1": "color-2",
    "option2": "34F",
    "inventory_quantity": 100
  },
  {
    "id": 6989459193913,
    "price": "68.00",
    "option1": "color-3",
    "option2": "32E",
    "inventory_quantity": 300
  },
  {
    "id": 6989459226681,
    "price": "68.00",
    "option1": "color-3",
    "option2": "32F",
    "inventory_quantity": 320
  },
  {
    "id": 6989459292217,
    "price": "68.00",
    "option1": "color-3",
    "option2": "34F",
    "inventory_quantity": 264
  },
  {
    "id": 4615725842469,
    "price": "68.00",
    "option1": "color-4",
    "option2": "32E",
    "inventory_quantity": 214
  },
  {
    "id": 4615725908005,
    "price": "68.00",
    "option1": "color-4",
    "option2": "34D",
    "inventory_quantity": 133
  },
  {
    "id": 4615725973541,
    "price": "68.00",
    "option1": "color-4",
    "option2": "34F",
    "inventory_quantity": 891
  },
  {
    "id": 6989673398329,
    "price": "68.00",
    "option1": "color-5",
    "option2": "32E(DD)",
    "inventory_quantity": 98
  },
  {
    "id": 6989673431097,
    "price": "68.00",
    "option1": "color-5",
    "option2": "32F",
    "inventory_quantity": 98
  },
  {
    "id": 6989673463865,
    "option1": "color-5",
    "option2": "34D",
    "inventory_quantity": 8
  },
  {
    "id": 6989673496633,
    "price": "68.00",
    "option1": "color-5",
    "option2": "34E",
    "inventory_quantity": 348
  }
]  

using lodash to group in my class component shown below. Here is pass

input which is 'color-1', 'color-2',..

product-detail.js

export default class ProductDetail extends Component {
constructor(props) {
    super(props)
    console.log('props -- ', props);

    this.state = {
        color: 'color-1',
        stock: ''
    }
}


groupBy(input) {
    const groupByColor = _(this.props.variants)
                        .groupBy(x => x.option1)
                        .map((value, key) => ({ color: key, details: value }))
                        .value();
}  

Using the groupByfunction I'm using this in my render() shown below. Basically trying to extract data using bunch of console outputs shown below just to test. Hope this helps reproduce the issue.

render() {
    const val = this.groupBy(this.state.color);
    console.log(val);
    console.log(val[0]);
    console.log(Object.keys(val));
    console.log(JSON.stringify(val[0]));

Answer 1

cannot read property of undefined means that the object you were looking for an ID on wasn't there. Undefined is thrown when the interpreter doesn't understand or can't find the object you were anticipating being there.

In the specific case of your script it means that the object hasn't been fully built and been made available at the moment the script is called, this could be due to the fact that your using an ajax/xhr call and the info doesn't get there at the same time you make the request for the id of the object.