JS Array map function, cannot read property of undefined

Question

I have a complex JS array of objects and properties. Some of them return value but some return null, the problem is when I am mapping through the list it causes error whenever there is a null value.

I cannot filter out the array right now because I am already inside a loop and should not create another filtered array. What would my best approach be? I want my loop to return Array.Group.name[0].text and if it is not there just return null.

const x = [
      {
        "id": "1",
        "Groups": [
          {
            "name": [
              {
                "language": "en-US",
                "text": "REGULAR_TIME"
              }
            ],
            "isSystem": true
          },
          {
            "name": [
              {
                "language": "en-US",
                "text": "CHARGEABLE"
              }
            ],
            "isSystem": true
          }
        ]
      },
      {
        "id": "2",
        "Groups": [
          {
            "name": [
              {
                "language": "en-US",
                "text": "REGULAR_TIME"
              }
            ],
            "isSystem": true
          },
          {
            "name": [
              {
                "language": "en-US",
                "text": "CHARGEABLE"
              }
            ],
            "isSystem": true
          }
        ]
      }
      ]
      
      x.map(y=>y.Groups.name[0].text)
      
      console.log(x)

curveball · Accepted Answer · 2021-10-26 07:44:28Z

2

Groups is an array too, so you have to use indexes to access its members like Groups[0]. It is not clear the name of what Groups element you want to get though.

Probably, you meant x.map(y=>y.Groups[0].name[0].text)

Groups being an array is an object too. so Groups.name gives you nothing since such a property isn't present.

let x = [
      {
        "id": "1",
        "Groups": [
          {
            "isSystem": true
          },
          {
            "name": [
              {
                "language": "en-US",
                "text": "CHARGEABLE"
              }
            ],
            "isSystem": true
          }
        ]
      },
      {
        "id": "2",
        "Groups": [
          {
            "name": [
              {
                "language": "en-US",
                "text": "REGULAR_TIME"
              }
            ],
            "isSystem": true
          },
          {
            "name": [
              {
                "language": "en-US",
                "text": "CHARGEABLE"
              }
            ],
            "isSystem": true
          }
        ]
      }
      ];
      
      
      console.log(x.map(y => y.Groups[0].name?.[0].text));

      // or just filter the absent names out before the main routine.
      console.log(x.filter(y => y.Groups[0].name).map(y => y.Groups[0].name?.[0].text));

edited Oct 26, 2021 at 7:44

answered Oct 26, 2021 at 7:22

curveball

4,51515 gold badges47 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

WildThing Over a year ago

x.map(y=>y.Groups[0].name[0].text Yes, this is the exact data I am trying to get and I have this error. So how would I access the elements when Groups.name is not available?

curveball Over a year ago

I added an example when name is not present. It gives just undefined in the final result, but you can implement any value through if check in map callback.

curveball Over a year ago

@WildThing also I added beforehand filtering to get just elements where name property is present.

PHM La · Accepted Answer · 2021-10-26 07:57:25Z

1

here is the problem ! Groups is an array so :

let result = [];
  for (i=0; i<x.length;i++){
    for(j=0;j<x[i].Groups.length;j++){
      result.push(x[i].Groups[j].name[0].text)
    }
  }

this loop returns a result that contains an array of text

or you can try this :

x.forEach(el=>{
    el.Groups.forEach(v=>{
      result.push(v.name[0].text)
    })
  })

edited Oct 26, 2021 at 7:57

answered Oct 26, 2021 at 7:51

PHM La

1983 silver badges11 bronze badges

Collectives™ on Stack Overflow

JS Array map function, cannot read property of undefined

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related