title: Javascript Fetch Requests
body: <p>I currently have two data files. The first is just a list of the projects I'm concerned with, i.e. </p>
  
  <p><strong>PROJECT_DATA_LIST</strong></p>
  
  <pre><code>{"id": "1a", "name": "project1"},
  {"id": "2b", "name": "project2"}
  </code></pre>
  
  <p>The second is a list of data for each project more specifically: </p>
  
  <p><strong>PROJECT_DATA</strong></p>
  
  <pre><code>var project1 = [
  {
      group: "Alpha",
      data: [
          {
              label: "Accounting",
              data: [
                  {timeRange: ["2018-02-26 11:40:00 AM", "2018-02-26 11:40:20 AM"], val: "TargetA"},
                  {timeRange: ["2018-02-26 11:40:20 AM", "2018-02-26 11:40:40 AM"], val: "TargetA"},
                  {timeRange: ["2018-02-26 11:41:00 AM", "2018-02-26 11:41:20 AM"], val: "TargetA"},
              ]
          },
          {
              label: "Engineering",
              data: [
                  {timeRange: ["2018-02-26 11:40:40 AM", "2018-02-26 11:41:00 AM"], val: "TargetB"},
                  {timeRange: ["2018-02-26 11:41:00 AM", "2018-02-26 11:41:20 AM"], val: "TargetB"}
              ]
          },
          {
              label: "Marketing",
              data: [
                  {timeRange: ["2018-02-26 11:40:40 AM", "2018-02-26 11:41:00 AM"], val: "TargetC"},
                  {timeRange: ["2018-02-26 11:41:00 AM", "2018-02-26 11:41:20 AM"], val: "TargetC"},
              ]
          },
      ]
  },
  {
      group: "Beta",
      data: [
          {
              label: "Accounting",
              data: [
                  {timeRange: ["2018-02-26 11:40:20 AM", "2018-02-26 11:40:40 AM"], val: "TargetA"},
                  {timeRange: ["2018-02-26 11:41:00 AM", "2018-02-26 11:41:20 AM"], val: "TargetA"},
              ]
          },
          {
              label: "Engineering",
              data: [
                  {timeRange: ["2018-02-26 11:40:40 AM", "2018-02-26 11:41:00 AM"], val: "TargetB"},
                  {timeRange: ["2018-02-26 11:41:00 AM", "2018-02-26 11:41:20 AM"], val: "TargetB"},
                  {timeRange: ["2018-02-26 11:41:20 AM", "2018-02-26 11:41:40 AM"], val: "TargetB"},
                  {timeRange: ["2018-02-26 11:41:40 AM", "2018-02-26 11:42:00 AM"], val: "TargetB"},
                  {timeRange: ["2018-02-26 11:42:00 AM", "2018-02-26 11:42:20 AM"], val: "TargetB"}
              ]
          },
          {
              label: "Marketing",
              data: [
                  {timeRange: ["2018-02-26 11:40:40 AM", "2018-02-26 11:41:00 AM"], val: "TargetC"},
                  {timeRange: ["2018-02-26 11:41:00 AM", "2018-02-26 11:41:20 AM"], val: "TargetC"},
              ]
          }
      ]
  }
  ];
  var project2 = [
      {
          group: "Alpha",
          data: [
              {
                  label: "Accounting",
                  data: [
                      {timeRange: ["2018-02-26 11:40:00 AM", "2018-02-26 11:40:20 AM"], val: "TargetA"},
                      {timeRange: ["2018-02-26 11:40:20 AM", "2018-02-26 11:40:40 AM"], val: "TargetA"},
                      {timeRange: ["2018-02-26 11:41:00 AM", "2018-02-26 11:41:20 AM"], val: "TargetA"},
                  ]
              },
              {
                  label: "Engineering",
                  data: [
                      {timeRange: ["2018-02-26 11:40:40 AM", "2018-02-26 11:41:00 AM"], val: "TargetB"},
                      {timeRange: ["2018-02-26 11:41:00 AM", "2018-02-26 11:41:20 AM"], val: "TargetB"}
                  ]
              },
              {
                  label: "Marketing",
                  data: [
                      {timeRange: ["2018-02-26 11:40:40 AM", "2018-02-26 11:41:00 AM"], val: "TargetC"},
                      {timeRange: ["2018-02-26 11:41:00 AM", "2018-02-26 11:41:20 AM"], val: "TargetC"},
                  ]
              },
          ]
      },
      {
          group: "Beta",
          data: [
              {
                  label: "Accounting",
                  data: [
                      {timeRange: ["2018-02-26 11:40:20 AM", "2018-02-26 11:40:40 AM"], val: "TargetA"},
                      {timeRange: ["2018-02-26 11:41:00 AM", "2018-02-26 11:41:20 AM"], val: "TargetA"},
                  ]
              },
              {
                  label: "Engineering",
                  data: [
                      {timeRange: ["2018-02-26 11:40:40 AM", "2018-02-26 11:41:00 AM"], val: "TargetB"},
                      {timeRange: ["2018-02-26 11:41:00 AM", "2018-02-26 11:41:20 AM"], val: "TargetB"},
                      {timeRange: ["2018-02-26 11:41:20 AM", "2018-02-26 11:41:40 AM"], val: "TargetB"},
                      {timeRange: ["2018-02-26 11:41:40 AM", "2018-02-26 11:42:00 AM"], val: "TargetB"},
                      {timeRange: ["2018-02-26 11:42:00 AM", "2018-02-26 11:42:20 AM"], val: "TargetB"}
                  ]
              },
              {
                  label: "Marketing",
                  data: [
                      {timeRange: ["2018-02-26 11:40:40 AM", "2018-02-26 11:41:00 AM"], val: "TargetC"},
                      {timeRange: ["2018-02-26 11:41:00 AM", "2018-02-26 11:41:20 AM"], val: "TargetC"},
                  ]
              }
          ]
      }
  ];
  </code></pre>
  
  <p>I am trying to use the first file as a key to fetch data for a specific project. So, for "project1" from the first file return <strong>project1</strong> data from the second file. I know I need to use a javascript fetch/then to accomplish this. Something like: </p>
  
  <pre><code>fetch(project_list)
      .then( function (project_data) {
  
  //fetch the data for each project
      for(var project of project_data){
  
          //fetch data for specific project
          fetch(project_data_list).then(function( project_data ){
  
              //add project data to run data store
              store.add(...)
          })
  
      }
  
  })
  </code></pre>
  
  <p>But, I mean that's obviously wrong (and incomplete). Any ideas on how I can accomplish this? </p>
  
  <p>I'm using a FLUX design pattern, hence the store.add.</p>