title: Using JSON API Serializer to create more complicated JSON
body: <p>The examples <a href="https://github.com/SeyZ/jsonapi-serializer" rel="nofollow noreferrer">here</a> don't go nearly far enough in explaining how to produce a more complicated structure...</p>
  
  <p>If I want to end up with something like:</p>
  
  <pre><code>{
    "data": {
      "type": "mobile_screens",
      "id": "1",
      "attributes": {
        "title": "Watch"
      },
      "relationships": {
        "mobile_screen_components": {
          "data": [
            {
              "id": "1_1",
              "type": "mobile_screen_components"
            },
            {
              "id": "1_2",
              "type": "mobile_screen_components"
            },
            ...
          ]
        }
      }
    },
    "included": [
      {
        "id": "1_1",
        "type": "mobile_screen_components",
        "attributes": {
          "title": "Featured Playlist",
          "display_type": "shelf"
        },
        "relationships": {
          "playlist": {
            "data": {
              "id": "938973798001",
              "type": "playlists"
            }
          }
        }
      },
      {
        "id": "938973798001",
        "type": "playlists",
        "relationships": {
          "videos": {
            "data": [
              {
                "id": "5536725488001",
                "type": "videos"
              },
              {
                "id": "5535943875001",
                "type": "videos"
              }
            ]
          }
        }
      },
      {
        "id": "5536725488001",
        "type": "videos",
        "attributes": {
          "duration": 78321,
          "live_stream": false,
          "thumbnail": {
            "width": 1280,
            "url":
              "http://xxx.jpg?pubId=694940094001",
            "height": 720
          },
          "last_published_date": "2017-08-09T18:26:04.899Z",
          "streams": [
            {
              "url":
                "http://xxx.m3u8",
              "mime_type": "MP4"
            }
          ],
          "last_modified_date": "2017-08-09T18:26:27.621Z",
          "description": "xxx",
          "fn__media_tags": [
            "weather",
            "personality"
          ],
          "created_date": "2017-08-09T18:23:16.830Z",
          "title": "NOAA predicts most active hurricane season since 2010",
          "fn__tve_authentication_required": false
        }
      },
      ...,
    ]
  }
  </code></pre>
  
  <p>what is the most simple data structure and serializer I can set up?</p>
  
  <p>I get stumped after something like:</p>
  
  <pre><code>const mobile_screen_components = responses.map((currentValue, index) =&gt; {
    id[`id_${index}`];
  });
  const dataSet = {
    id: 1,
    title: 'Watch',
    mobile_screen_components,
  };
  const ScreenSerializer = new JSONAPISerializer('mobile_screens', {
    attributes: ['title', 'mobile_screen_components'],
    mobile_screen_components: {
      ref: 'id',
    }
  });
  </code></pre>
  
  <p>Which only gives me:</p>
  
  <pre><code>{
    "data": {
      "type": "mobile_screens",
      "id": "1",
      "attributes": { "title": "Watch" },
      "relationships": {
        "mobile-screen-components": {
          "data": [
            { "type": "mobile_screen_components", "id": "1_0" },
            { "type": "mobile_screen_components", "id": "1_1" },
            { "type": "mobile_screen_components", "id": "1_2" },
            { "type": "mobile_screen_components", "id": "1_3" },
            { "type": "mobile_screen_components", "id": "1_4" },
            { "type": "mobile_screen_components", "id": "1_5" }
          ]
        }
      }
    }
  }
  </code></pre>
  
  <p>I have no idea how to get the "included" sibling to "data." etc.</p>