0

What exactly is the best practice for matching JSON:API data collections with their respective includes. Considering the following code below....

What if I wanted to loop through each venue and display the Owners full information for each Venue Record. Does JSON:API expect me to just search the include array for the matching Owner Record

find(included,data[$i].relationships.owner.data.id);

Would find() loop through the included array to look for the owner that has the matching id as the collection items owner in the relationships object ?

$(data).each(function(item){
var owner = find(included,'owner', item.relationships.owner.data.id)
})

I have not found a resource that explains this or perhapes I am mis understanding the point of json:api. If someone can explain this or point to a resource that relates to my question. I would appreciate it.

{
  "links": {
    "self": "http://127.0.0.1/api/venues?include=owner"
  },
  "data": [
    {
      "id": "5c5b49188fd33c7a989ba9b6",
      "type": "venues",
      "attributes": {
        "name": "Kreiger - Smith",
        "address": "69675 Reilly Vista",
        "location": {
          "type": "Point",
          "coordinates": [
            -112.110492,
            36.098948
          ]
        },
        "events": [
          {
            "_id": "ad52825a8f4812e92f87b8c6",
            "name": "Cool Awesome Event!",
            "user": "b3daa77b4c04a9551b8781d0",
            "id": "ad52825a8f4812e92f87b8c6"
          }
        ],
        "created_at": "2019-02-07T14:27:13.207Z",
        "updated_at": "2019-02-07T14:27:13.207Z"
      },
      "relationships": {
        "owner": {
          "data": {
            "id": "b3daa77b4c04a9551b8781d0",
            "type": "users"
          }
        }
      }
    },
    {
      "id": "5c5b49188fd33c7a989ba9b7",
      "type": "venues",
      "attributes": {
        "name": "Oberbrunner Inc",
        "address": "1132 Kenyon Stravenue",
        "location": {
          "type": "Point",
          "coordinates": [
            -112.110492,
            36.098948
          ]
        },
        "events": [
          {
            "_id": "ad52825a8f4812e92f87b8c6",
            "name": "Cool Awesome Event!",
            "user": "b3daa77b4c04a9551b8781d0",
            "id": "ad52825a8f4812e92f87b8c6"
          }
        ],
        "created_at": "2019-02-07T14:27:13.207Z",
        "updated_at": "2019-02-07T14:27:13.207Z"
      },
      "relationships": {
        "owner": {
          "data": {
            "id": "b3daa77b4c04a9551b8781d0",
            "type": "users"
          }
        }
      }
    },
    {
      "id": "5c5b49188fd33c7a989ba9b8",
      "type": "venues",
      "attributes": {
        "name": "Gibson - Muller",
        "address": "8457 Hailie Canyon",
        "location": {
          "type": "Point",
          "coordinates": [
            -112.110492,
            36.098948
          ]
        },
        "events": [
          {
            "_id": "ad52825a8f4812e92f87b8c6",
            "name": "Cool Awesome Event!",
            "user": "b3daa77b4c04a9551b8781d0",
            "id": "ad52825a8f4812e92f87b8c6"
          }
        ],
        "created_at": "2019-02-07T14:27:13.208Z",
        "updated_at": "2019-02-07T14:27:13.208Z"
      },
      "relationships": {
        "owner": {
          "data": {
            "id": "a1881c06eec96db9901c7bbf",
            "type": "users"
          }
        }
      }
    }
  ],
  "included": [
    {
      "id": "b3daa77b4c04a9551b8781d0",
      "type": "users",
      "attributes": {
        "username": "killerjohn",
        "firstname": "John",
        "lastname": "Chapman"
      }
    },
    {
      "id": "a1881c06eec96db9901c7bbf",
      "type": "users",
      "attributes": {
        "username": "numerical25",
        "firstname": "Billy",
        "lastname": "Gordon"
      }
    }
  ]
}  

This is my best possible solution. But is there a better way ? Seems like alot more coding just to find a collections associated included data

  axios.get('http://127.0.0.1:3000/api/venues?include=owner').then(function(response) {
    var  venues = response.data.data;
    var data = response.data;
    for(x in venues) {
      var owner = data.included.find(function(element) {
        if(element.id == venues[x].relationships.owner.data.id) {
          return element;
        }
      });
    }
  });
Community
  • 1
  • 1
numerical25
  • 10,524
  • 36
  • 130
  • 209
  • You are missing the "." after data[$i]relationships -> data[$i].relationships. Or is that a typo? – inoabrian Feb 07 '19 at 15:22
  • Its a typo. But the question isnt about the syntax. Its about the best practices for mapping a collection of includes with the respective main data collection – numerical25 Feb 07 '19 at 16:33
  • what I wrote was nothing but psuedo. Its been fixed though – numerical25 Feb 07 '19 at 16:40
  • It's not quite clear from your question what you are trying to achieve. Especially it's unclear what you are comparing it to if talking about "a lot more coding". You may not want to deal with the response directly if it comes to more complex stuff like relationships but represent that data trough a store? You may want to check out existing implementations: https://jsonapi.org/implementations/ – jelhan Feb 15 '19 at 23:24
  • Don't know if you ever found an answer to this but it looks like there's a package on that implementations page for this: https://www.npmjs.com/package/json-api-merge. I just discovered it as well. – Timothy Fisher Jul 21 '20 at 20:45

0 Answers0