为什么我的JSON更新了一个API而不是另一个API？

Question

这个问题的答案很可能是“上床睡觉，你会在早上看到错误”，但下面的片段引起我的挫败感并不会让这种情况发生。

正如您在下面的代码段中看到的那样。我有各种tables带有NVD3图表和一些纯p个标签，其中包含来自多个 API 的数据。

我遇到的问题是使用datepicker更新 API网址时（允许在 API网址中设置date 从所选时间段返回数据）所有数据更新，除了表类badTable（它是红色的那个）。我做错了什么或错过了什么？

有人可以看看这个并希望指出我明显遗漏的解决方案吗？

$(function() {
  var start = moment().subtract(29, 'days');
  var end = moment();
  let dateDates = start.format('YYYY-MM-DD') + ',' + end.format('YYYY-MM-DD');
  let defaultSummaryUrl = `https://discovrbookings.innocraft.cloud/?module=API&method=API.get&format=json&idSite=2&period=day&date=${dateDates}&token_auth=68aa5bd12137f13255dcb98794b65dff`;
  let defaultPagesUrl = `https://discovrbookings.innocraft.cloud/?module=API&method=Actions.getPageTitles&format=json&idSite=2&period=day&date=${dateDates}&token_auth=68aa5bd12137f13255dcb98794b65dff`;
  let defaultDeviceUrl = `https://discovrbookings.innocraft.cloud/?module=API&method=DevicesDetection.getType&format=json&idSite=2&period=day&date=${dateDates}&token_auth=68aa5bd12137f13255dcb98794b65dff`;
  let defaultBrowserUrl = `https://discovrbookings.innocraft.cloud/?module=API&method=DevicesDetection.getBrowsers&format=json&idSite=2&period=day&date=${dateDates}&token_auth=68aa5bd12137f13255dcb98794b65dff`;
  let defaultOSUrl = `https://discovrbookings.innocraft.cloud/?module=API&method=DevicesDetection.getOsFamilies&format=json&idSite=2&period=day&date=${dateDates}&token_auth=68aa5bd12137f13255dcb98794b65dff`;

  summaryAnalytics(defaultSummaryUrl);
  pagesAnalytics(defaultPagesUrl);
  deviceAnalytics(defaultDeviceUrl);
  browserAnalytics(defaultBrowserUrl);
  OSAnalytics(defaultOSUrl);

  $('#reportrange').daterangepicker({
    startDate: start,
    endDate: end,
    ranges: {
      'Last 7 Days': [moment().subtract(6, 'days'), moment()],
      'Last 30 Days': [moment().subtract(29, 'days'), moment()],
      'Last 90 Days': [moment().subtract(89, 'days'), moment()],
      'This Month': [moment().startOf('month'), moment().endOf('month')],
      'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    }
  }, function(start, end) {

    let dates = start.format('YYYY-MM-DD') + ',' + end.format('YYYY-MM-DD');
    let summaryUrl = `https://discovrbookings.innocraft.cloud/?module=API&method=API.get&format=json&idSite=2&period=day&date=${dates}&token_auth=68aa5bd12137f13255dcb98794b65dff`;
    let pagesUrl = `https://discovrbookings.innocraft.cloud/?module=API&method=Actions.getPageTitles&format=json&idSite=2&period=day&date=${dateDates}&token_auth=68aa5bd12137f13255dcb98794b65dff`;
    let deviceUrl = `https://discovrbookings.innocraft.cloud/?module=API&method=DevicesDetection.getType&format=json&idSite=2&period=day&date=${dates}&token_auth=68aa5bd12137f13255dcb98794b65dff`;
    let browserUrl = `https://discovrbookings.innocraft.cloud/?module=API&method=DevicesDetection.getBrowsers&format=json&idSite=2&period=day&date=${dates}&token_auth=68aa5bd12137f13255dcb98794b65dff`;
    let OSUrl = `https://discovrbookings.innocraft.cloud/?module=API&method=DevicesDetection.getOsFamilies&format=json&idSite=2&period=day&date=${dates}&token_auth=68aa5bd12137f13255dcb98794b65dff`;

    summaryAnalytics(summaryUrl);
    pagesAnalytics(pagesUrl);
    deviceAnalytics(deviceUrl);
    browserAnalytics(browserUrl);
    OSAnalytics(OSUrl);


  });

  function summaryAnalytics(summaryUrl) {
    $.getJSON(summaryUrl, (data) => {
      let visitors = 0;
      let uniq_visitors = 0;
      let pageviews = 0;
      let uniq_pageviews = 0;
      let actions = 0;
      let outlinks = 0;
      let bounces = 0;
      let avgtime = 0;
      let dayCount = 0;

      for (i in data) {

        if (data[i].nb_visits) {
          visitors += data[i].nb_visits;
        }
        if (data[i].nb_uniq_visitors) {
          uniq_visitors += data[i].nb_uniq_visitors;
        }
        if (data[i].nb_pageviews) {
          pageviews += data[i].nb_pageviews;
        }
        if (data[i].nb_uniq_pageviews) {
          uniq_pageviews += data[i].nb_uniq_pageviews;
        }
        if (data[i].nb_actions) {
          actions += data[i].nb_actions;
        }
        if (data[i].nb_outlinks) {
          outlinks += data[i].nb_outlinks;
        }
        if (data[i].bounce_count) {
          bounces += data[i].bounce_count;
        }
        if (data[i].avg_time_on_site) {
          avgtime += data[i].avg_time_on_site;
          dayCount++;
        }
      }

      $("#visitors").html(visitors);
      $("#uniq_visitors").html(uniq_visitors);
      $("#pageviews").html(pageviews);
      $("#uniq_pageviews").html(uniq_pageviews);
      $("#actions").html(actions);
      $("#outlinks").html(outlinks);
      $("#bounces").html(bounces);
      $("#avgtime").html(Math.round(avgtime / dayCount));
      $("#uniq_visitors_percent").html(Math.round(uniq_visitors / (visitors / 100)));
      $("#pageviews_percent").html(Math.round(pageviews / (visitors / 100)));
      $("#uniq_pageviews_percent").html(Math.round(uniq_pageviews / (pageviews / 100)));
      $("#actions_percent").html(Math.round(actions / (pageviews / 100)));
      $("#outlinks_percent").html(Math.round(outlinks / (pageviews / 100)));
      $("#bounces_percent").html(Math.round(bounces / (pageviews / 100)));

    });
    d3.json(summaryUrl, (page_data) => {

      var lc_visits = page_data;
      var lc_unique_visits = page_data;
      var lc_page_views = page_data;
      var lc_unique_page_views = page_data;
      var lc_actions = page_data;
      var lc_outlinks = page_data;
      var lc_bounces = page_data;

      var result_visits = Object.keys(lc_visits)
        .map(k => [new Date(k).getTime(), (lc_visits[k].nb_visits || 0)]);
      lc_visits = {
        "key": "Visits",
        "values": result_visits
      };

      var result_unique_visits = Object.keys(lc_unique_visits)
        .map(k => [new Date(k).getTime(), (lc_unique_visits[k].nb_uniq_visitors || 0)]);
      lc_unique_visits = {
        "key": "Unique Visits",
        "values": result_unique_visits
      };

      var result_page_views = Object.keys(lc_page_views)
        .map(k => [new Date(k).getTime(), (lc_page_views[k].nb_pageviews || 0)]);
      lc_page_views = {
        "key": "Views",
        "values": result_page_views
      };

      var result_unique_views = Object.keys(lc_unique_page_views)
        .map(k => [new Date(k).getTime(), (lc_unique_page_views[k].nb_uniq_pageviews || 0)]);
      lc_unique_page_views = {
        "key": "Unique Views",
        "values": result_unique_views
      };

      var result_actions = Object.keys(lc_actions)
        .map(k => [new Date(k).getTime(), (lc_actions[k].nb_actions || 0)]);
      lc_actions = {
        "key": "Actions",
        "values": result_actions
      };

      var result_outlinks = Object.keys(lc_outlinks)
        .map(k => [new Date(k).getTime(), (lc_outlinks[k].nb_outlinks || 0)]);
      lc_outlinks = {
        "key": "Exits",
        "values": result_outlinks
      };

      var result_bounces = Object.keys(lc_bounces)
        .map(k => [new Date(k).getTime(), (lc_bounces[k].bounce_count || 0)]);
      lc_bounces = {
        "key": "Bounces",
        "values": result_bounces
      };

      var data = [];
      data.push(lc_visits);
      data.push(lc_unique_visits);
      data.push(lc_page_views);
      data.push(lc_unique_page_views);
      data.push(lc_actions);
      data.push(lc_outlinks);
      data.push(lc_bounces);

      nv.addGraph(function() {

        var chart = nv.models.lineChart()
          .margin({
            left: 45,
            right: 30
          })
          .x(function(d) {
            return d[0]
          })
          .y(function(d) {
            return d[1]
          })
          .color(['#007be8', '#ea4354', '#eb532e', '#6feabb', '#673ab7', '#4caf50', '#f44336'])
          .useInteractiveGuideline(true);


        chart.xAxis
          .tickFormat(function(d) {
            return d3.time.format('%m/%d/%y')(new Date(d))
          });

        chart.yAxis
          .tickFormat(d3.format('d'));

        chart.yAxis.tickPadding(15);
        chart.xAxis.tickPadding(15);

        chart.interactiveLayer.tooltip.headerFormatter(function(d) {
          return d;
        });

        d3.select('#summaryChart svg')
          .datum(data)
          .transition().duration(500)
          .call(chart);

        nv.utils.windowResize(chart.update);

        $('#summaryChart').data('chart', chart);

        return chart;
      });
    });
  };
  // END Summary Chart

  //Campaign Table
  function pagesAnalytics(pagesUrl) {
    $.getJSON(pagesUrl, (campaignPages_data) => {
      Array.prototype.groupBy = function(key) {
        var path = key.split('.');
        var result = {};
        try {
          this.forEach(function(item) {
            // es6: path.reduce((a, b) => a[b], item)
            type = path.reduce(function(a, b) {
              return a[b]
            }, item) || 'null';
            if (!result[type])
              result[type] = [];
            result[type].push(item);
          });
          return result;
        } catch (err) {
          console.log(err);
          return {};
        }
      };

      function getPropertySum(key, arr) {
        return arr.reduce((a, b) => (key in b ? a + b[key] : a), 0)
      }
      let flattenArr = [].concat.apply([], Object.values(campaignPages_data));
      let groups = flattenArr.groupBy('label');
      let table = document.getElementById('campaignTable');
      table.innerHTML = '';
      Object.keys(groups).forEach(function(label) {
        let row = document.createElement('tr');
        let logw = document.createElement('td');
        let logo = document.createElement('img');
        let lab = document.createElement('span');
        let nbv = document.createElement('td');
        let nbu = document.createElement('td');
        let nba = document.createElement('td');
        let nbb = document.createElement('td');
        logw.className = "subscriber subscriber-fixed-alone fixed-cell";
        logo.className = "table_image_icon";
        lab.className = "stat number text-center";
        nbv.className = "stat number text-center";
        nbu.className = "stat number text-center";
        nba.className = "stat number text-center";
        nbb.className = "stat number text-center";

        row.appendChild(logw);
        row.appendChild(nbv);
        row.appendChild(nbu);
        row.appendChild(nba);
        row.appendChild(nbb);

        logw.appendChild(logo);
        logw.appendChild(lab);
        logo.src = 'https://discovrbookings.com/wp-content/themes/discovr-application/assets/img/campaigns/ads-icon.svg';
        lab.innerHTML = label;
        nbv.innerHTML = getPropertySum('nb_visits', groups[label]);
        nbu.innerHTML = getPropertySum('nb_uniq_visitors', groups[label]);
        nba.innerHTML = getPropertySum('nb_actions', groups[label]);
        nbb.innerHTML = getPropertySum('bounce_count', groups[label]);
        table.appendChild(row);
      });
    });
  };
  // END Campaign Table


  //Device Type
  function deviceAnalytics(deviceUrl) {
    $.getJSON(deviceUrl, (device_data) => {
      Array.prototype.groupBy = function(key) {
        var path = key.split('.');
        var result = {};
        try {
          this.forEach(function(item) {
            // es6: path.reduce((a, b) => a[b], item)
            type = path.reduce(function(a, b) {
              return a[b]
            }, item) || 'null';
            if (!result[type])
              result[type] = [];
            result[type].push(item);
          });
          return result;
        } catch (err) {
          console.log(err);
          return {};
        }
      };

      function getPropertySum(key, arr) {
        return arr.reduce((a, b) => (key in b ? a + b[key] : a), 0)
      }
      let flattenArr = [].concat.apply([], Object.values(device_data));
      let groups = flattenArr.groupBy('label');
      let table = document.getElementById('deviceTable');
      table.innerHTML = '';
      Object.keys(groups).forEach(function(label) {
        let row = document.createElement('tr');
        let logw = document.createElement('td');
        let logo = document.createElement('img');
        let lab = document.createElement('span');
        let nbv = document.createElement('td');
        let nbu = document.createElement('td');
        let nba = document.createElement('td');
        let nbb = document.createElement('td');
        logw.className = "month subscriber subscriber-fixed-alone fixed-cell";
        logo.className = "table_image_icon";
        lab.className = "stat number text-center";
        nbv.className = "stat number text-center";
        nbu.className = "stat number text-center";
        nba.className = "stat number text-center";
        nbb.className = "stat number text-center";

        row.appendChild(logw);
        row.appendChild(nbv);
        row.appendChild(nbu);
        row.appendChild(nba);
        row.appendChild(nbb);

        logw.appendChild(logo);
        logw.appendChild(lab);
        logo.src = 'https://discovrbookings.com/wp-content/themes/discovr-application/assets/img/device-icons/' + label + '.png';
        lab.innerHTML = label;
        nbv.innerHTML = getPropertySum('nb_visits', groups[label]);
        nbu.innerHTML = getPropertySum('nb_uniq_visitors', groups[label]);
        nba.innerHTML = getPropertySum('nb_actions', groups[label]);
        nbb.innerHTML = getPropertySum('bounce_count', groups[label]);
        table.appendChild(row);
      });
    });
  };
  // END Device Type


  //Browser Type
  function browserAnalytics(browserUrl) {
    $.getJSON(browserUrl, (browser_data) => {
      Array.prototype.groupBy = function(key) {
        var path = key.split('.');
        var result = {};
        try {
          this.forEach(function(item) {
            type = path.reduce(function(a, b) {
              return a[b]
            }, item) || 'null';
            if (!result[type])
              result[type] = [];
            result[type].push(item);
          });
          return result;
        } catch (err) {
          console.log(err);
          return {};
        }
      };

      function getPropertySum(key, arr) {
        return arr.reduce((a, b) => (key in b ? a + b[key] : a), 0)
      }
      let flattenArr = [].concat.apply([], Object.values(browser_data));
      let groups = flattenArr.groupBy('label');
      let table = document.getElementById('browserTable');

      table.innerHTML = '';
      Object.keys(groups).forEach(function(label) {
        let row = document.createElement('tr');
        let logw = document.createElement('td');
        let logo = document.createElement('img');
        let lab = document.createElement('span');
        let nbv = document.createElement('td');
        let nbu = document.createElement('td');
        let nba = document.createElement('td');
        let nbb = document.createElement('td');
        logw.className = "month subscriber subscriber-fixed-alone fixed-cell";
        logo.className = "table_image_icon";
        lab.className = "stat number text-center";
        nbv.className = "stat number text-center";
        nbu.className = "stat number text-center";
        nba.className = "stat number text-center";
        nbb.className = "stat number text-center";

        row.appendChild(logw);
        row.appendChild(nbv);
        row.appendChild(nbu);
        row.appendChild(nba);
        row.appendChild(nbb);

        logw.appendChild(logo);
        logw.appendChild(lab);
        logoProperty = getPropertySum('logo', groups[label]);
        var logoPropSplit = logoProperty.split("/");
        var logoName = logoPropSplit[logoPropSplit.length - 1];
        logo.src = 'https://discovrbookings.com/wp-content/themes/discovr-application/assets/img/browser-icons/' + logoName;
        lab.innerHTML = label;
        nbv.innerHTML = getPropertySum('nb_visits', groups[label]);
        nbu.innerHTML = getPropertySum('nb_uniq_visitors', groups[label]);
        nba.innerHTML = getPropertySum('nb_actions', groups[label]);
        nbb.innerHTML = getPropertySum('bounce_count', groups[label]);
        table.appendChild(row);
      });
    });
  };
  // END Browser Type

  //Operating System Type
  function OSAnalytics(OSUrl) {
    $.getJSON(OSUrl, (OS_data) => {
      Array.prototype.groupBy = function(key) {
        var path = key.split('.');
        var result = {};
        try {
          this.forEach(function(item) {
            type = path.reduce(function(a, b) {
              return a[b]
            }, item) || 'null';
            if (!result[type])
              result[type] = [];
            result[type].push(item);
          });
          return result;
        } catch (err) {
          console.log(err);
          return {};
        }
      };

      function getPropertySum(key, arr) {
        return arr.reduce((a, b) => (key in b ? a + b[key] : a), 0)
      }
      let flattenArr = [].concat.apply([], Object.values(OS_data));
      let groups = flattenArr.groupBy('label');
      let table = document.getElementById('OSTable');
      table.innerHTML = '';
      Object.keys(groups).forEach(function(label) {
        let row = document.createElement('tr');
        let logw = document.createElement('td');
        let logo = document.createElement('img');
        let lab = document.createElement('span');
        let nbv = document.createElement('td');
        let nbu = document.createElement('td');
        let nba = document.createElement('td');
        let nbb = document.createElement('td');
        logw.className = "month subscriber subscriber-fixed-alone fixed-cell";
        logo.className = "table_image_icon";
        lab.className = "stat number text-center";
        nbv.className = "stat number text-center";
        nbu.className = "stat number text-center";
        nba.className = "stat number text-center";
        nbb.className = "stat number text-center";

        row.appendChild(logw);
        row.appendChild(nbv);
        row.appendChild(nbu);
        row.appendChild(nba);
        row.appendChild(nbb);

        logw.appendChild(logo);
        logw.appendChild(lab);
        // Get the logo property and use split on the string
        logoProperty = getPropertySum('logo', groups[label]);
        var logoPropSplit = logoProperty.split("/");
        var logoName = logoPropSplit[logoPropSplit.length - 1];
        logo.src = 'https://discovrbookings.com/wp-content/themes/discovr-application/assets/img/os-icons/' + logoName;
        lab.innerHTML = label;
        nbv.innerHTML = getPropertySum('nb_visits', groups[label]);
        nbu.innerHTML = getPropertySum('nb_uniq_visitors', groups[label]);
        nba.innerHTML = getPropertySum('nb_actions', groups[label]);
        nbb.innerHTML = getPropertySum('bounce_count', groups[label]);
        table.appendChild(row);
      });
    });
  };
  // END Operating System Type
}); //End of Function

.table_image_icon {
  width: 20px;
  height: 20px;
}

.overview p {
  border: 1px solid;
  width: 24%;
  display: inline-block;
}

#summaryChart svg {
  height: 300px;
  width: 100%;
}

.badTable {
  border: 10px solid red;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.27/daterangepicker.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.27/daterangepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.js"></script>

<div id="reportrange">
  <span>Choose Dates</span>
</div>

<div class="overview">
  <p><span id="visitors"></span> visits</p>
  <p><span id="uniq_visitors"></span> unique visits</p>
  <p><span id="pageviews"></span> views</p>
  <p><span id="uniq_pageviews"></span> unique views</p>
  <p><span id="bounces"></span> bounces</p>
  <p><span id="actions"></span> actions</p>
  <p><span id="outlinks"></span> exits</p>
  <p><span id="avgtime"></span> seconds</p>

  <div id="summaryChart" class="line-chart text-center" data-x-grid="false">
    <svg></svg>
  </div>

  <table border="1" class="badTable">
    <thead>
      <tr>
        <td>WHY WON'T IT UPDATE WHEN CHANGING DATES???</td>
      </tr>
    </thead>
    <tbody id="campaignTable"></tbody>
  </table>

  <table border="1">

    <tbody id="deviceTable"></tbody>
  </table>

  <table border="1">

    <tbody id="browserTable"></tbody>
  </table>
  <table border="1">

    <tbody id="OSTable"></tbody>
  </table>

Answer 1

在${dateDates}使用${dates}代替null