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

Posted 2023-05-08

【中文标题】如何仅从 JSON 数据中获取最后 10 个对象

【英文标题】：How to get the last 10 objects only from JSON data

【发布时间】：2018-11-28 13:04:09

【问题描述】：

我有一个 .json 文件，我只想使用图形高度图从这个 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>

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

【参考方案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>

【讨论】：

你能帮我把它应用到我的脚本中吗？

@FullDISK 是的，当然，在这里，只需传递last10 数组而不是data，就可以了。我编辑了答案。

抱歉，我现在发现脚本正在获取第一个值，而不是最后一个写入 json 文件的值。有什么办法可以恢复订单？

@FullDISK 这怎么可能？！通常这应该取最后一个 10 项目，很可能是你的 json 被反转了，在这种情况下你可以将条件更改为：return index < 10;。

是的，你是对的 :) 无论如何感谢最后一个例子 ;)