javascript - 如何仅从 JSON 数据获取最后 10 个对象

Question

我有一个 .json 文件，我只想使用图表 hightcharts 从此 json 文件中获取最后 10 个对象。

我的问题是脚本正在从数组中获取完整的对象，而我只想获取最后 10 个对象...

已修复。

我的代码是这样的:

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>
<script>
$.getJSON('https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/usdeur.json',
  function (data) {

   var currentValue = 0.9345;

    Highcharts.chart('container', {
      chart: {
        zoomType: 'x'
      },
      title: {
        text: 'USD to EUR exchange rate over time'
      },
      subtitle: {
        text: document.ontouchstart === undefined ?
            'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
      },
      xAxis: {
        type: 'datetime'
      },
      yAxis: {
            title: {
              text: 'Exchange rate'
            },
            plotLines: [{
                value: currentValue,
                color: 'green',
                dashStyle: 'Dot',
                width: 1,
                label: {
                    text: currentValue,
                    textAlign: 'left',
                    x: -45
                }
            }]
        },
      legend: {
        enabled: false
      },
      plotOptions: {
        area: {
          fillColor: {
            linearGradient: {
              x1: 0,
              y1: 0,
              x2: 0,
              y2: 1
            },
            stops: [
              [0, Highcharts.getOptions().colors[0]],
              [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
            ]
          },
          marker: {
            radius: 2
          },
          lineWidth: 1,
          states: {
            hover: {
              lineWidth: 1
            }
          },
          threshold: null
        }
      },

      series: [{
        type: 'area',
        name: 'USD to EUR',
        data: data
      }]
    });
  }
);
</script>

如果有人能帮助我，那就太好了:)

Answer 1

这很简单，要仅获取 json array 的最后 10 项，您可以使用 Array.filter() method 根据索引对其进行过滤。 像这样:

var last10 = data.filter(function(el, index) {
  return index >= data.length - 10;
});

您只需使用 index >= data.length - 10 过滤具有最后 10 个索引的项目。

演示:

在您的情况下，您只需过滤 data 数组并将新过滤的 array 传递到图表:

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script>
  $.getJSON(
    'https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/usdeur.json',
    function(data) {

      var last10 = data.filter(function(el, index) {
        return index >= data.length - 10;
      });

      Highcharts.chart('container', {
        chart: {
          zoomType: 'x'
        },
        title: {
          text: 'USD to EUR exchange rate over time'
        },
        subtitle: {
          text: document.ontouchstart === undefined ?
            'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
        },
        xAxis: {
          type: 'datetime'
        },
        yAxis: {
          title: {
            text: 'Exchange rate'
          }
        },
        legend: {
          enabled: false
        },
        plotOptions: {
          area: {
            fillColor: {
              linearGradient: {
                x1: 0,
                y1: 0,
                x2: 0,
                y2: 1
              },
              stops: [
                [0, Highcharts.getOptions().colors[0]],
                [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
              ]
            },
            marker: {
              radius: 2
            },
            lineWidth: 1,
            states: {
              hover: {
                lineWidth: 1
              }
            },
            threshold: null
          }
        },

        series: [{
          type: 'area',
          name: 'USD to EUR',
          data: last10
        }]
      });
    }
  );
</script>