Дата возвращения как «Неопределенный» и «NaN» в некоторых браузерах?

Я сегодня утром работаю над созданием веб-приложения, которое берет информацию из файла JSON - в этом случае читай информацию из учетной записи @POTUS, так как Белый дом просто сделал массу информации общедоступной - и представляет ее на экран.Дата возвращения как «Неопределенный» и «NaN» в некоторых браузерах?

В частности, я работал над взятием JSON-файла информации о твиттере @POTUS и отображением текста твита и даты. Дата взята из метки времени, и я использовал немного JS, чтобы перевести ее в формат, который мне нравится.

Моя проблема заключается в следующем: дата отображается правильно в Chrome (где я тестировал), но при просмотре в Safari, Firefox или мобильном устройстве дата возвращает «undefined NaN, NaN», где месяц возвращается «undefined», а день и год возвращаются «NaN». Просматривая мой код, я не могу найти причину, почему это произойдет.

Вот мой HTML файл в полном комплекте:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>@POTUS</title> 
     <link rel="stylesheet" href="assets/css/main.css"> 
     <link href="https://fonts.googleapis.com/css?family=Lato:300,900" rel="stylesheet"> 
    </head> 
    <body> 
     <div class="tweet-container"> 
     <header> 
      <h1 class="title"> 
       <a class="twitter" href="http://www.twitter.com/potus" target="_blank">@POTUS</a> Tweets 
      </h1> 
      <p class="description">A complete archieve of tweets from President Barack Obama, presented in reverse chronological order.</p> 
     </header> 
     <div id="potus-tweets"></div> 
     <button id="btn">New Tweet</button> 
     </div> 
     <script src="assets/js/tweets.js"></script> 
    </body> 
</html>

Вот мой файл JS в полном комплекте:

var tweetCounter = 0; 
var tweetsContainer = document.getElementById("potus-tweets"); 
var btn = document.getElementById("btn"); 

btn.addEventListener("click", function(){ 
    var request = new XMLHttpRequest(); 
    request.open('GET', 'assets/js/potus.json'); 
    request.onload = function(){ 
    var potusTweets = JSON.parse(request.responseText); 
    loadTweets(potusTweets); 
    }; 
    request.send(); 
}); 

function loadTweets(data){ 

    var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; 
    var date = new Date(data[tweetCounter].timestamp); 
    var year = date.getFullYear(); 
    var month = date.getMonth(); 
    var day = date.getDate(); 

    var tweet = ""; 

    for (i = 0; i < 1; i++){ 
    tweet += '<div class="tweet"><p class="copy">' + data[tweetCounter].text + '</p><p class="date">' + monthNames[month] + ' ' + day + ', ' + year + '</p></div>'; 
    tweetCounter++; 
    }; 

    tweetsContainer.insertAdjacentHTML('beforeend', tweet); 
};

Для справки, проект жив здесь: http://thejessicafelts.github.io/projects/POTUS-Tweets/

И код можно найти здесь: https://github.com/thejessicafelts/POTUS-Tweets

Любое понимание того, почему это не работает, было бы чрезвычайно оценено. Я пытаюсь устранить это все утро, и я не вижу ничего, что могло бы вызвать возврат «неопределенного NaN, NaN».

Заранее спасибо

источник

2017-01-15 Jessica

это ссылка вы делаете запрос GET по протоколу HTTPS: // GitHub. com/thejessicafelts/POTUS-Tweets/assets/js/potus.json Мне нужно отлаживать этот код в обоих браузерах (если да, то я получаю {ошибка: не найден}) –

Nevermind, я получил ссылку. –

Возможно, дубликат [* Почему Date.parse дает неверные результаты? *] (Http://stackoverflow.com/questions/2587345/why-does-date-parse-give-incorrect-results). – RobG

Во-первых, образец метки времени, как это было важной частью ввода, который отсутствует в этом вопросе.

{ // A sample tweet in your array. 
    "tweet_id": 796018814072672300, 
    "in_reply_to_status_id": "", 
    "in_reply_to_user_id": "", 
    "timestamp": "2016-11-08 15:57:29 +0000", 
    "source": "<a href=\"http://twitter.com\" rel=\"nofollow\">Twitter Web Client</a>", 
    "text": "Today, progress is on the ballot. Go vote - then make sure your friends, your family, and everyone you know votes too.", 
    "retweeted_status_id": "", 
    "retweeted_status_user_id": "", 
    "retweeted_status_timestamp": "", 
    "expanded_urls": "" 
}

С этим расфасованным для справки я бы ссылку на документ MDN для Date конструктора.

//Syntax: 
new Date(); [1] 
new Date(value); [2] 
new Date(dateString); [3] 
new Date(year, month[, date[, hours[, minutes[, seconds[, milliseconds]]]]]); [4]

От объекта я взял из json актива, а затем после этого описания, вы используете третий синтаксис. Я процитирую из документации, что dateString аргумент должен соответствовать с date.parse методом

dateString

String value representing a date. The string should be in a format recognized by the Date.parse() method (IETF-compliant RFC 2822 timestamps and also a version of ISO8601).

Подойдя ближе к делу вашей проблемы, я буду упоминать documentation для date.parse

dateString

A string representing an RFC2822 or ISO 8601 date (other formats may be used, but results may be unexpected).

Да, неожиданный. Далее в описании вы найдете: -

Because of the variances in parsing of date strings, it is recommended to always manually parse strings as results are inconsistent, especially across different ECMAScript implementations where strings like "2015-10-12 12:00:00" may be parsed to as NaN, UTC or local timezone.

Теперь это звучит знакомо.

Я проверил ту же строку без смещения часового пояса на firefox 47.0.2

var a = new Date("2016-11-08 15:57:29") 
a.getDate() 
// returns 8 
a.getMonth() 
//returns 10 
a.getFullYear() 
//returns 2016

источник

2017-01-15 17:44:46

'new Date (" 2016-11-08 15:57:29 ")' возвращает NaN в Safari. Не разбирайте строки с конструктором Date (это эквивалентно Date.parse для синтаксического анализа), используйте небольшую функцию или библиотеку. – RobG

Я понимаю. Я просто давал тестовую ситуацию, когда она работает в firefox. У меня есть включение в мой ответ, что подход datestring может иметь неожиданные результаты. –

Преобразование ваш timestamp в миллисекундах, а затем кормить их конструктор Date():

var a = Date(<date in milliseconds>);

источник

2017-01-16 17:49:59 Thevs

Дата возвращения как «Неопределенный» и «NaN» в некоторых браузерах?

ответ

Смежные вопросы