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

标签 javascript jquery json d3.js

这个问题的答案很可能是“去 sleep ，早上你就会看到错误”，但下面的代码片段给我带来的挫败感不会让这种情况发生。

正如您在下面的代码片段中看到的。我有各种tables与 NVD3图表和一些简单的p包含来自多个 API 的数据的标签。

我遇到的问题是使用 datepicker 更新 API URL 时遇到的问题(它允许在 API URL 中设置 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>

最佳答案

在您的 pagesUrl 中，您使用的是 ${dateDates} 而不是 ${dates}

关于javascript - 为什么我的 JSON 更新了一个 API 而不是另一个 API？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48276989/

上一篇：javascript - 如何在带有井号的链接中强制页面重新加载？

下一篇：javascript - 反斜杠从字符串中删除

相关文章：

javascript - Kendo 用户界面和谷歌地图

javascript - Ajax请求传递参数失败

ios - 如何遍历 JSON 对象并将其视为字符串 - Swift

python - 将 cURL 转换为 Python 请求错误

javascript - 显示函数不适用于 Materialize 和 jQuery

javascript - 如何在 CSS 中使悬停动态化？

javascript - 匹配九个数字和最后一个大写字母的正则表达式

jquery 不适用于特定的 html 文件

javascript - jquery for tooltip on image map area shapes

android - 使用 GSON 从 Web 服务检索数据时遇到问题

©2024 IT工具网  联系我们