How to access first element in array of nested objects?

Question

I have the following JSON data like so:

[{
  "target": {
    "source": "https://firebasestorage.googleapis.com/v0/b/vue-photoapp-api.appspot.com/o/photos%2Fmountains-hero.jpg?alt=media&token=fbe93188-d13d-4a7f-a472-4a529aa565a0",
    "selector": {
      "conformsTo": "http://www.w3.org/TR/media-frags/",
      "value": "xywh=pixel:582.6087036132812,114.49275207519531,98.55072021484375,189.85508728027344",
      "type": "FragmentSelector"
    }
  },
  "id": "#423647a0-bd23-11ea-8727-73bc60edcd34",
  "body": [{
    "created": "2020-07-03T11:49:32.058Z",
    "purpose": "commenting",
    "type": "TextualBody",
    "creator": {
      "name": "testme",
      "id": "0qbvzjI3llhyIrKVO6PZxcZUSiI2"
    },
    "value": "don't move me"
  }, {
    "creator": {
      "name": "testme",
      "id": "0qbvzjI3llhyIrKVO6PZxcZUSiI2"
    },
    "value": "move",
    "type": "TextualBody",
    "purpose": "tagging",
    "created": "2020-07-03T11:49:30.850Z"
  }],
  "@context": "http://www.w3.org/ns/anno.jsonld",
  "type": "Annotation",
  "photoDocId": "92wNwz2aaqy7CWf3mGo1"
}, {
  "@context": "http://www.w3.org/ns/anno.jsonld",
  "body": [{
    "type": "TextualBody",
    "purpose": "commenting",
    "created": "2020-07-03T10:57:40.590Z",
    "value": "anyone ever climb this mountain top?",
    "creator": {
      "id": "K2Lb1R7owqR9BYmpJAJzrg6w1s92",
      "name": "doss"
    }
  }, {
    "created": "2020-07-03T10:57:39.351Z",
    "value": "ridge",
    "type": "TextualBody",
    "creator": {
      "name": "doss",
      "id": "K2Lb1R7owqR9BYmpJAJzrg6w1s92"
    },
    "purpose": "tagging"
  }, {
    "value": "i did in 2005",
    "purpose": "commenting",
    "type": "TextualBody",
    "creator": {
      "id": "0qbvzjI3llhyIrKVO6PZxcZUSiI2",
      "name": "testme"
    },
    "created": "2020-07-03T10:59:45.318Z"
  }, {
    "type": "TextualBody",
    "purpose": "tagging",
    "creator": {
      "name": "testme",
      "id": "0qbvzjI3llhyIrKVO6PZxcZUSiI2"
    },
    "value": "testme",
    "created": "2020-07-03T10:59:43.966Z"
  }, {
    "value": "test",
    "type": "TextualBody",
    "purpose": "replying",
    "creator": {
      "name": "doss",
      "id": "K2Lb1R7owqR9BYmpJAJzrg6w1s92"
    },
    "created": "2020-07-03T11:39:18.860Z"
  }],
  "type": "Annotation",
  "photoDocId": "92wNwz2aaqy7CWf3mGo1",
  "id": "#03a1f0e0-bd1c-11ea-a688-e1387cc6bed2",
  "target": {
    "selector": {
      "value": "xywh=pixel:247.82608032226562,73.91304016113281,233.33334350585938,240.57972717285156",
      "type": "FragmentSelector",
      "conformsTo": "http://www.w3.org/TR/media-frags/"
    },
    "source": "https://firebasestorage.googleapis.com/v0/b/vue-photoapp-api.appspot.com/o/photos%2Fmountains-hero.jpg?alt=media&token=fbe93188-d13d-4a7f-a472-4a529aa565a0"
  }
}, {
  "body": [{
    "value": "test",
    "created": "2020-07-05T11:29:14.742Z",
    "purpose": "commenting",
    "creator": {
      "name": "doss",
      "id": "K2Lb1R7owqR9BYmpJAJzrg6w1s92"
    },
    "type": "TextualBody"
  }, {
    "creator": {
      "name": "doss",
      "id": "K2Lb1R7owqR9BYmpJAJzrg6w1s92"
    },
    "created": "2020-07-05T11:29:13.584Z",
    "value": "test",
    "purpose": "tagging",
    "type": "TextualBody"
  }],
  "type": "Annotation",
  "target": {
    "selector": {
      "conformsTo": "http://www.w3.org/TR/media-frags/",
      "value": "xywh=pixel:395.65216064453125,413.0434875488281,142.02899169921875,131.88406372070312",
      "type": "FragmentSelector"
    },
    "source": "https://firebasestorage.googleapis.com/v0/b/vue-photoapp-api.appspot.com/o/photos%2Fmountains-hero.jpg?alt=media&token=fbe93188-d13d-4a7f-a472-4a529aa565a0"
  },
  "photoDocId": "92wNwz2aaqy7CWf3mGo1",
  "id": "#c1761960-beb2-11ea-888f-c3ab54e1f3a9",
  "@context": "http://www.w3.org/ns/anno.jsonld"
}]

This data is annotation data for an image.

What I am trying to do is loop through each object's body and only check the first element's (ie, body[0].creator.id) creator field. I want to check the id value in that creator field. If the id is the original author's id (lets use the id 0qbvzjI3llhyIrKVO6PZxcZUSiI2 for this example), then return console.log('original author').

I need help with accessing the above element. Any tips?

Side note: The reason for the above workflow is because I need to prevent another user from editing the author's original annotation. The original author will always be the first element in each body.

This might help: [How can I access and process nested objects, arrays or JSON?](https://stackoverflow.com/q/11922383/218196) — Felix Kling, Jul 06 '20 at 10:06

score 0 · Accepted Answer · answered Jul 06 '20 at 10:12

You could try this

const data = [
  {
    target: {
      source:
        'https://firebasestorage.googleapis.com/v0/b/vue-photoapp-api.appspot.com/o/photos%2Fmountains-hero.jpg?alt=media&token=fbe93188-d13d-4a7f-a472-4a529aa565a0',
      selector: {
        conformsTo: 'http://www.w3.org/TR/media-frags/',
        value:
          'xywh=pixel:582.6087036132812,114.49275207519531,98.55072021484375,189.85508728027344',
        type: 'FragmentSelector'
      }
    },
    id: '#423647a0-bd23-11ea-8727-73bc60edcd34',
    body: [
      {
        created: '2020-07-03T11:49:32.058Z',
        purpose: 'commenting',
        type: 'TextualBody',
        creator: { name: 'testme', id: '0qbvzjI3llhyIrKVO6PZxcZUSiI2' },
        value: "don't move me"
      },
      {
        creator: { name: 'testme', id: '0qbvzjI3llhyIrKVO6PZxcZUSiI2' },
        value: 'move',
        type: 'TextualBody',
        purpose: 'tagging',
        created: '2020-07-03T11:49:30.850Z'
      }
    ],
    '@context': 'http://www.w3.org/ns/anno.jsonld',
    type: 'Annotation',
    photoDocId: '92wNwz2aaqy7CWf3mGo1'
  },
  {
    '@context': 'http://www.w3.org/ns/anno.jsonld',
    body: [
      {
        type: 'TextualBody',
        purpose: 'commenting',
        created: '2020-07-03T10:57:40.590Z',
        value: 'anyone ever climb this mountain top?',
        creator: { id: 'K2Lb1R7owqR9BYmpJAJzrg6w1s92', name: 'doss' }
      },
      {
        created: '2020-07-03T10:57:39.351Z',
        value: 'ridge',
        type: 'TextualBody',
        creator: { name: 'doss', id: 'K2Lb1R7owqR9BYmpJAJzrg6w1s92' },
        purpose: 'tagging'
      },
      {
        value: 'i did in 2005',
        purpose: 'commenting',
        type: 'TextualBody',
        creator: { id: '0qbvzjI3llhyIrKVO6PZxcZUSiI2', name: 'testme' },
        created: '2020-07-03T10:59:45.318Z'
      },
      {
        type: 'TextualBody',
        purpose: 'tagging',
        creator: { name: 'testme', id: '0qbvzjI3llhyIrKVO6PZxcZUSiI2' },
        value: 'testme',
        created: '2020-07-03T10:59:43.966Z'
      },
      {
        value: 'test',
        type: 'TextualBody',
        purpose: 'replying',
        creator: { name: 'doss', id: 'K2Lb1R7owqR9BYmpJAJzrg6w1s92' },
        created: '2020-07-03T11:39:18.860Z'
      }
    ],
    type: 'Annotation',
    photoDocId: '92wNwz2aaqy7CWf3mGo1',
    id: '#03a1f0e0-bd1c-11ea-a688-e1387cc6bed2',
    target: {
      selector: {
        value:
          'xywh=pixel:247.82608032226562,73.91304016113281,233.33334350585938,240.57972717285156',
        type: 'FragmentSelector',
        conformsTo: 'http://www.w3.org/TR/media-frags/'
      },
      source:
        'https://firebasestorage.googleapis.com/v0/b/vue-photoapp-api.appspot.com/o/photos%2Fmountains-hero.jpg?alt=media&token=fbe93188-d13d-4a7f-a472-4a529aa565a0'
    }
  },
  {
    body: [
      {
        value: 'test',
        created: '2020-07-05T11:29:14.742Z',
        purpose: 'commenting',
        creator: { name: 'doss', id: 'K2Lb1R7owqR9BYmpJAJzrg6w1s92' },
        type: 'TextualBody'
      },
      {
        creator: { name: 'doss', id: 'K2Lb1R7owqR9BYmpJAJzrg6w1s92' },
        created: '2020-07-05T11:29:13.584Z',
        value: 'test',
        purpose: 'tagging',
        type: 'TextualBody'
      }
    ],
    type: 'Annotation',
    target: {
      selector: {
        conformsTo: 'http://www.w3.org/TR/media-frags/',
        value:
          'xywh=pixel:395.65216064453125,413.0434875488281,142.02899169921875,131.88406372070312',
        type: 'FragmentSelector'
      },
      source:
        'https://firebasestorage.googleapis.com/v0/b/vue-photoapp-api.appspot.com/o/photos%2Fmountains-hero.jpg?alt=media&token=fbe93188-d13d-4a7f-a472-4a529aa565a0'
    },
    photoDocId: '92wNwz2aaqy7CWf3mGo1',
    id: '#c1761960-beb2-11ea-888f-c3ab54e1f3a9',
    '@context': 'http://www.w3.org/ns/anno.jsonld'
  }
]

data.forEach(d => {
  if (d.body[0].creator.id === '0qbvzjI3llhyIrKVO6PZxcZUSiI2') {
    console.log('original author')
  }
})

Thank you. I was close to getting it in my own work, but needed that extra help. — redshift, Jul 06 '20 at 10:27

How to access first element in array of nested objects?

1 Answers1