Как разобрать JSON worldtide.info с двумя отливами/приливами за цикл?

Привет всем, я снова вернулся, это мой второй вопрос. На этот раз я хочу, чтобы данные прогноза приливов и отливов с сайта 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"
    }
    ]
    }

ЯВАСКРИПТ

$.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


javascript json api jquery geography
person kmg    schedule 18.03.2017    source источник
comment
Вы хотите получить из этого ответа json объект с самым низким и самым высоким значением прилива, то есть { minTide: xxx, maxTide: yyyy }?   -  person loretoparisi    schedule 18.03.2017
comment
О, привет .. @loretoparisi Я так думаю, хочу простой текстовый вывод двух низких и высоких плюс их время. Пожалуйста, предоставьте полный код, я новичок в этом, и только строка кода для меня загадочна. Дата тоже была бы хороша. Спасибо.   -  person kmg    schedule 18.03.2017
comment
Попробуйте ответ ниже, он должен быть в порядке (только javascript, тогда вам нужно выполнить свой HTML через JQuery.   -  person loretoparisi    schedule 18.03.2017
comment
@loretoparisi или просто СЕГОДНЯ/ЗАВТРА, у меня немного закружилась голова. :)   -  person kmg    schedule 18.03.2017
comment
@loretoparisi Еще раз спасибо. Просто запустите свой код, и, похоже, он действительно работает, хотя вывод выглядит для меня как новый массив, и это меня смущает. Хотите получить HTML-вывод набора из двух приливов и отливов и приливов за 24 часа. Хотя только что проверил, в JSON есть 4 Low и 3 High! . Итак, хотите знать о будущих приливах, как в этом URL-адресе JSON, высоком и низком, извините за это.   -  person kmg    schedule 18.03.2017
comment
@loretoparisi сейчас изучает ваш код. Я очень новичок в этом, поэтому мне трудно понять фрагменты, не видя всех частей.   -  person kmg    schedule 18.03.2017
comment
Ну, вы можете узнать о современном javascript, поэтому я использую там массив filter, оператор arrow, классический массив sort с функцией для работы с массивом объектов. Функция сортировки показывает все части, т.е. это было бы намного проще. Я добавлю ссылку на документ, подождите минутку...   -  person loretoparisi    schedule 18.03.2017
comment
@loretoparisi Думаю, я могу как-то добавить c, d, e, f, g?   -  person kmg    schedule 18.03.2017
comment
пожалуйста, определите переменные / значения c, d, e, f и g.   -  person loretoparisi    schedule 18.03.2017
comment
@loretoparisi Просто подумал, что c, d, e, f .. возможно, могут быть предстоящими будущими минимумами и максимумами, хотя, вероятно, нет, поскольку они могли быть отфильтрованы? В основном просто хотите иметь минимумы и максимумы от следующего, а также время и дату, как просто «TT», или телетайпный текст в простой таблице. А если говорить о будущем, то с пометкой СЕГОДНЯ или СЕГОДНЯ, ЗАВТРА, а затем с ПН-ВС или СР-ПТ. Но сейчас я откручиваюсь, В данный момент я просто хочу самое простое решение. Я так счастлив, что вы помогаете. Хотел бы мы поболтать, у меня явно не хватает очков.   -  person kmg    schedule 18.03.2017

Ответы (1)


arrow_upward
1
arrow_downward

Если я правильно понял, и вам нужен быстрый способ получить максимальное/минимальное значение прилива, вы делаете так же просто, как

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() функция сортировки для сортировки массива объектов в порядке убывания.

person loretoparisi    schedule 18.03.2017
comment
Возможно, это не то решение, которое я ищу. Потерялся в коде. Думаю, мой JSfiddle ранее не был сохранен, теперь он сохранен. Assistare mi prego, mi scusi mio codice sono, Che pizza!. - person kmg; 18.03.2017