Mapping Nested Array Object

I am trying to access a value that is nested in an array. I am trying to access "total_state_changes" in this response:

{
  "sis_imports": [
    {
      "id": 5130,
      "created_at": "2023-08-21T18:02:22Z",
      "started_at": "2023-08-21T18:02:25Z",
      "ended_at": "2023-08-21T18:02:26Z",
      "updated_at": "2023-08-21T18:02:27Z",
      "progress": 100,
      "workflow_state": "imported_with_messages",
      "data": {
        "import_type": "instructure_csv",
        "downloadable_attachment_ids": [
          954469
        ],
        "supplied_batches": [
          "account"
        ],
        "counts": {
          "change_sis_ids": 0,
          "accounts": 1,
          "terms": 0,
          "abstract_courses": 0,
          "courses": 0,
          "sections": 0,
          "xlists": 0,
          "users": 0,
          "logins": 0,
          "enrollments": 0,
          "admins": 0,
          "group_categories": 0,
          "groups": 0,
          "group_memberships": 0,
          "grade_publishing_results": 0,
          "user_observers": 0,
          "error_count": 0,
          "warning_count": 3
        },
        "running_immediately": true,
        "completed_importers": [
          "account"
        ],
        "statistics": {
          "total_state_changes": 1,

Here is my mapping:

    var statechange = data.sis_imports["data"]["statistics"].map (({
        total_state_changes
    }) => [total_state_changes]);

I am getting TypeError: Cannot read properties of undefined (reading ‘statistics’).

Any help would be appreciated!

>Solution :

Your data object contains one key sis_imports which is an array with single element. To reach that only element you should go like this:

var statechange = data.sis_imports[0]["data"]["statistics"];

Regarding your mapping function it won’t work well too since you can’t call method map on objects. But you can call map over keys, values and other properties of objects. In your case, you seem to map your statistics object’s total_state_changes property’s value into an array. You can do this using this code:

var statechange = data.sis_imports[0]["data"]["statistics"];
data.sis_imports[0]["data"]["statistics"] = [statechange.total_state_changes];

This way your statistics object wi have the structure of following:

{
  "sis_imports": [
    {
      ...,
      "data": {
        ...,
        "statistics": [1]
      },
      ...
    }
  ]

I hope this helps!