Question

我今天早上一直在创建一个从JSON文件中获取信息的网络应用程序 - 在这种情况下，来自@POTUS帐户的推文信息，因为白宫只是公开发布了大量信息 - 并提供了它屏幕上。

具体来说，我一直在努力获取@POTUS推文信息的JSON文件，并显示推文的文本和日期。日期取自时间戳，我使用了一些JS将其翻译成一种吸引我的格式。

我的问题是：日期在Chrome中正确显示（我在测试的地方），但在Safari，Firefox或移动设备上查看时，日期会返回＆＃34;未定义的NaN，NaN和＃34 ;，月份回归＆＃34;未定义＆＃34;而且日和年都在回归＆＃34; NaN＆＃34;。仔细查看我的代码，我找不到发生这种情况的原因。

以下是我的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

对于为什么这不起作用的任何见解都将非常感激。我整个上午一直试图解决这个问题，而且我看不到任何会导致＆＃34;未定义的NaN，NaN＆＃34;的回归。

提前致谢

Answer 1

首先，时间戳的样本，因为它是问题中缺少的重要输入。

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

有了这个参考，我会链接到Date构造函数的MDN文档。

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

表示日期的字符串值。该字符串应采用Date.parse（）方法识别的格式（符合IETF的RFC 2822时间戳以及ISO8601的版本）。

更接近问题的原因，我会提到date.parse的{{3}}

dateString

表示RFC2822或ISO 8601日期的字符串（可以使用其他格式，但结果可能是意外的）。

是的，出乎意料。在说明书的下方，你可能会发现： -

由于解析日期字符串的差异，建议始终手动解析字符串，因为结果不一致，尤其是在不同的ECMAScript实现中，其中字符串如＆＃34; 2015-10-12 12：00：00＆＃34 ;可以解析为NaN，UTC或本地时区。

现在听起来很熟悉。

我在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

Answer 2

将timestamp转换为毫秒，然后将它们提供给Date（）构造函数：

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

返回日期为＆＃34;未定义＆＃34;和＆＃34; NaN＆＃34;在某些浏览器？

2 个答案: