Datum, das in einigen Browsern als "Undefined" und "NaN" zurückgegeben wird?

Ich habe heute Morgen an der Erstellung einer Web-App gearbeitet, die Informationen aus einer JSON-Datei übernimmt - in diesem Fall tweeten Sie Informationen aus dem @POTUS-Konto, da das Weiße Haus eine Unmenge an Informationen öffentlich zugänglich gemacht hat - und präsentiert es der Bildschirm.Datum, das in einigen Browsern als "Undefined" und "NaN" zurückgegeben wird?

Insbesondere habe ich daran gearbeitet, die JSON-Datei von @ POTUS Tweet Informationen zu nehmen und den Text des Tweet und das Datum anzuzeigen. Das Datum stammt aus einem Zeitstempel und ich habe ein bisschen JS verwendet, um es in ein für mich ansprechendes Format zu übersetzen.

Mein Problem ist das: Das Datum erscheint korrekt in Chrome (wo ich getestet habe), aber wenn es in Safari, Firefox oder einem mobilen Gerät angezeigt wird, gibt das Datum "undefined NaN, NaN", wo Monat kommt "undefiniert" zurück und Tag und Jahr geben beide "NaN" zurück. Wenn ich meinen Code durchschaue, kann ich keinen Grund finden, warum das passieren würde.

Hier meine HTML-Datei ist in seiner Gesamtheit:

<!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>

Hier meine JS-Datei ist in seiner Gesamtheit:

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); 
};

Als Referenz ist das Projekt Live hier: http://thejessicafelts.github.io/projects/POTUS-Tweets/

Und der Code kann hier gefunden werden: https://github.com/thejessicafelts/POTUS-Tweets

Einsichten darüber, warum dies nicht funktioniert, wären sehr willkommen. Ich habe den ganzen Morgen versucht, den Fehler zu beheben, und ich kann nichts sehen, was die Rückkehr von "undefiniertem NaN, NaN" verursachen würde.

Vielen Dank im Voraus

Quelle

2017-01-15 Jessica

ist dies der Link eine GET-Anforderung stellen, auf https: // GitHub. com/thejessicafelts/POTUS-Tweets/assets/js/potus.json Ich brauche es, um diesen Code auf beiden Browsern zu debuggen (wenn ja, dann bekomme ich einen {Fehler: nicht gefunden}) –

Nevermind, ich habe den Link. –

Wahrscheinlich ein Duplikat von [* Warum gibt Date.parse falsche Ergebnisse? *] (Http://stackoverflow.com/questions/2587345/why-does-date-parse-give-incorrect-results). – RobG

Zunächst wird eine Probe des Zeitstempels, wie es war ein wichtiger Teil der Eingabe, die in der Frage fehlt.

{ // 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": "" 
}

Damit setzen Referenz bis ich für den Date Konstruktor der MDN doc verbinden würde.

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

Vom Objekt nahm ich von Ihrem json Wirtschaftsguts, und im Anschluss an diese Beschreibung dann, verwenden Sie die dritte Syntax. Ich werde aus der Dokumentation zitieren, die das dateString Argument mit der date.parse Methode entsprechen

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

Beim Näherkommen, um die Ursache des Problems, ich werde die documentation für date.parse

dateString

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

Ja erwähnen, unerwartet. Weiter unten in der Beschreibung finden Sie: -

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.

Nun, das klingt vertraut.

Ich habe die gleiche Zeichenfolge ohne Zeitzone Offset auf Firefox 47.0 getestet.2

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

Quelle

2017-01-15 17:44:46

'neues Datum (" 2016-11-08 15:57:29 ")' gibt NaN in Safari zurück. Analysieren Sie keine Strings mit dem Date-Konstruktor (dies entspricht der Date.parse für das Parsing), verwenden Sie eine kleine Funktion oder Bibliothek. – RobG

Ich verstehe. Ich gab gerade eine Testsituation, wo es in Firefox funktioniert. Ich habe es in meiner Antwort enthalten, dass der Ansatz mit Datumsangaben zu unerwarteten Ergebnissen führen kann. –

Konvertieren Sie Ihre timestamp bis Millisekunden, dann sie das Datum() Konstruktor füttern:

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

Quelle

2017-01-16 17:49:59 Thevs

Datum, das in einigen Browsern als "Undefined" und "NaN" zurückgegeben wird?

Antwort

Verwandte Themen