如何使用每个周期的两个低潮/高潮来解析 worldtide.info JSON？

Question

大家好，我又回来了，这是我的第二个问题。这次我希望从 worldtide.info 获取潮汐预测数据以工作并输出为 HTML。我认为，问题在于每个周期都有两个低潮和两个高潮，它们的参考类型相同。我是个菜鸟。是不是一些“。”错位或与 JSON 结构有关？随意缩短代码。感谢您的阅读。下面是不输出的代码和 JSFiddle：

JSON

{

    "status":200,
    "callCount":1,
    "requestLat":"-9",
    "requestLon":"147",
    "responseLat":-9.099998,
    "responseLon":146.9,
    "atlas":"TPXO_8_v1",
    "copyright":"Tidal data retrieved from www.worldtide.info. Copyright © 2014-2017 FaMe IT. Licensed for use of individual spatial coordinates on behalf of/by an end-user. Copyright © 2010-2016 Oregon State University. Licensed for individual spatial coordinates via ModEM-Geophysics Inc. NO GUARANTEES ARE MADE ABOUT THE CORRECTNESS OF THIS DATA. You may not use it if anyone or anything could come to harm as a result of using it (e.g. for navigational purposes).",
    "extremes":[
    {
    "dt":1489824260,
    "date":"2017-03-18T08:04+0000",
    "height":-0.191,
    "type":"Low"
    },
    {
    "dt":1489866721,
    "date":"2017-03-18T19:52+0000",
    "height":0.272,
    "type":"High"
    },
    {
    "dt":1489896470,
    "date":"2017-03-19T04:07+0000",
    "height":-0.141,
    "type":"Low"
    },
    {
    "dt":1489908798,
    "date":"2017-03-19T07:33+0000",
    "height":-0.104,
    "type":"High"
    },
    {
    "dt":1489926121,
    "date":"2017-03-19T12:22+0000",
    "height":-0.208,
    "type":"Low"
    },
    {
    "dt":1489953836,
    "date":"2017-03-19T20:03+0000",
    "height":0.415,
    "type":"High"
    },
    {
    "dt":1489979503,
    "date":"2017-03-20T03:11+0000",
    "height":-0.218,
    "type":"Low"
    }
    ]
    }

JAVASCRIPT

$.getJSON("https://www.worldtides.info/api?extremes&lat=-9&lon=147&key=<API KEY HERE>", function(data) {
console.log(data);

//setting up the variables
var tide1 = data.extremes.[0].height
var tide2 = data.extremes.[1].height
var tide3 = data.extremes.[2].height
var tide4 = data.extremes.[3].height

var time1 = data.extremes.[0].time
var time2 = data.extremes.[1].time
var time3 = data.extremes.[2].time
var time4 = data.extremes.[3].time

var type1 = data.extremes.[0].type
var type2 = data.extremes.[1].type
var type3 = data.extremes.[2].type
var type4 = data.extremes.[3].type

// to insert in table
    $('#tide1').text(tide1)
    $('#tide2').text(tide2)
    $('#tide3').text(tide3)
    $('#tide4').text(tide4)

    $('#time1').text(time1)
    $('#time2').text(time2)
    $('#time3').text(time2)
    $('#time4').text(time3)

    $('#type1').text(type1)
    $('#type2').text(type2)
    $('#type3').text(type3)
    $('#type4').text(type4)     

});

HTML

<tt>
<h3>TIDAL TIMES</h3>
<table border="1" width=150 class="extremes">
<tr><td id="tide1"></td><td id="time1"></td><td id="type1"></td></tr>
<tr><td id="tide2"></td><td id="time2"></td><td id="type2"></td></tr>
<tr><td id="tide3"></td><td id="time3"></td><td id="type3"></td></tr>
<tr><td id="tide4"></td><td id="time4"></td><td id="type4"></td></tr>
</table>

JSFIDDLE

Answer 1

如果我理解得很好，并且您想要一种快速获取最高/最低潮汐值的方法，那么您只需这样做

var lowestTide=res.extremes.filter(tide => { return tide.type=="Low"; }).sort(function(a,b) {return (a.height > b.height) ? -1 : ((b.height > a.height) ? 1 : 0);} )[0]

var highestTide=res.extremes.filter(tide => { return tide.type=="High"; }).sort(function(a,b) {return (a.height > b.height) ? -1 : ((b.height > a.height) ? 1 : 0);} )[0]

$.getJSON("https://www.worldtides.info/api?extremes&lat=-9&lon=147&key=863f3f3f-2ce7-40bb-912b-f6a8d862aedd", function(data) {


  var lowestTide = data.extremes.filter(tide => {
    return tide.type == "Low";
  }).sort(function(a, b) {
    return (a.height > b.height) ? -1 : ((b.height > a.height) ? 1 : 0);
  })[0];

  var highestTide = data.extremes.filter(tide => {
    return tide.type == "High";
  }).sort(function(a, b) {
    return (a.height > b.height) ? -1 : ((b.height > a.height) ? 1 : 0);
  })[0];


  console.log("LOWEST TIDE:", lowestTide, "HIGHEST TIDE", highestTide);

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

说明：

我使用Array.filter() 函数按type 字段过滤值（依次 type='High' 和 type='Low'），然后使用Array.sort() 排序函数按降序对对象数组进行排序.