Javascript 如何将JSON获取数据分离到不同的div中

我有javascript来获取json信息。我将在本地存储这个json文件（我从中下载了一个示例文件并添加了birthdate对象以供示例使用）

我试图解析返回的JSON信息，并将内容发布到两个单独的div中。我有一个名为“birthdate”的json对象。在我的脚本中，我有一个变量集来调用今天的日期，名为“today”。它在控制台中将日期打印为“05-12”，这也是我用JSON格式化“生日”的方式。我不需要年份或时间

我想让脚本将“today”与json对象“birthdate”进行比较。 如果today=birthdate，那么我希望将该条目信息显示在用户列表today div中，并显示在页面的Birthday部分下

如果今天不等于生日，我希望在用户列表future div中显示的所有其他条目都显示在页面的生日future部分下

不应在两个区域张贴任何内容，仅在其中一个区域张贴

任何人能提供的任何帮助都将不胜感激。我将在下面包含我的所有代码。代码段可能会给出错误，因为我有JSON文件的本地路径，而不是在线版本

这是我的代码笔，它的代码笔没有生日JSON对象

HTML
身体{
背景色：#EFEF；
}
.用户{
填充：15px；
边框：1px实心#e9e9e9；
边框底色：#d5d5d5；
边框底宽：2px；
边界半径：4px；
背景色：#fff；
颜色：#000；
保证金：5px；
}
今天生日
======================================================================================================
生日未来

这是因为您将同一个节点附加到两个不同的div。如果查看

appendChild

的文档，您可以看到：

因此，在您的

renderUser

函数中，您应该将当前用户与未来用户分开，并相应地追加每个用户

---

例如，这里每个用户随机添加到任一列表中；查看

renderUser

函数末尾附近的唯一更改：

以防万一-您可以用更短的方式获取今天的日期

const today=new date（）.toISOString（）.slice（5,10）

谢谢您的提示！我感谢你的帮助！我给你的钢笔换了一次。我用它作为if语句的开头：if（today===person.birthdate）{它工作得很好。非常感谢！如果今天不等于任何生日日期（today或uncoming），我会添加第二个和第三个if语句来显示todays和uncoming中的消息吗？我不这么认为。你需要知道，在用户渲染完成后，你没有任何数据来检查这种情况，除非你使用querySelector或其他东西来检查两个div项的长度，这似乎很复杂。从我的头顶上看，有两种方法是a。保持一个全局标志从“false”开始，你就可以打开它如果满足任何条件，则为“true”；或者b.将“今天”和“即将到来”（不知道您是否还需要“过去”？）分为两个数组，然后如果它们确实有项，则迭代并呈现用户，如果没有，则放入“无数据”消息。

JSON file:

<pre>
 [
    {
    "id": 1,
    "birthdate": "05-12",
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
    "street": "Kulas Light",
     "suite": "Apt. 556",
     "city": "Gwenborough",
      "zipcode": "92998-3874",
    "geo": {
     "lat": "-37.3159",
     "lng": "81.1496"
     }
     },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
     "name": "Romaguera-Crona",
     "catchPhrase": "Multi-layered client-server neural-net",
     "bs": "harness real-time e-markets"
     }
     },
  {
    "id": 2,
    "birthdate": "05-12",
     "name": "Leanne Graham",
     "username": "Antonette",
     "email": "Shanna@melissa.tv",
     "address": {
       "street": "Victor Plains",
       "suite": "Suite 879",
       "city": "Wisokyburgh",
       "zipcode": "90566-7771",
         "geo": {
         "lat": "-43.9509",
          "lng": "-34.4618"
        }
       },
       "phone": "010-692-6593 x09125",
        "website": "anastasia.net",
      "company": {
      "name": "Deckow-Crist",
      "catchPhrase": "Proactive didactic contingency",
       "bs": "synergize scalable supply-chains"
      }
     },
     {
       "id": 3,
   "birthdate": "05-15",
   "name": "Leanne Graham",
   "username": "Samantha",
    "email": "Nathan@yesenia.net",
   "address": {
      "street": "Douglas Extension",
     "suite": "Suite 847",
     "city": "McKenziehaven",
     "zipcode": "59590-4157",
    "geo": {
    "lat": "-68.6102",
    "lng": "-47.0653"
  }
},
"phone": "1-463-123-4447",
"website": "ramiro.info",
"company": {
  "name": "Romaguera-Jacobson",
  "catchPhrase": "Face to face bifurcated interface",
  "bs": "e-enable strategic applications"
}
 },
{
"id": 4,
"birthdate": "05-15",
"name": "Leanne Graham",
"username": "Karianne",
"email": "Julianne.OConner@kory.org",
"address": {
  "street": "Hoeger Mall",
  "suite": "Apt. 692",
  "city": "South Elvis",
  "zipcode": "53919-4257",
  "geo": {
    "lat": "29.4572",
    "lng": "-164.2990"
  }
},
"phone": "493-170-9623 x156",
"website": "kale.biz",
"company": {
  "name": "Robel-Corkery",
  "catchPhrase": "Multi-tiered zero tolerance productivity",
  "bs": "transition cutting-edge web services"
}
},
{
"id": 5,
"birthdate": "05-16",
"name": "Leanne Graham",
"username": "Kamren",
"email": "Lucio_Hettinger@annie.ca",
"address": {
  "street": "Skiles Walks",
  "suite": "Suite 351",
  "city": "Roscoeview",
  "zipcode": "33263",
  "geo": {
    "lat": "-31.8129",
    "lng": "62.5342"
  }
},
"phone": "(254)954-1289",
"website": "demarco.info",
"company": {
  "name": "Keebler LLC",
  "catchPhrase": "User-centric fault-tolerant solution",
  "bs": "revolutionize end-to-end systems"
}
},
{
"id": 6,
"birthdate": "05-18",
"name": "Leanne Graham",
"username": "Leopoldo_Corkery",
"email": "Karley_Dach@jasper.info",
"address": {
  "street": "Norberto Crossing",
  "suite": "Apt. 950",
  "city": "South Christy",
  "zipcode": "23505-1337",
  "geo": {
    "lat": "-71.4197",
    "lng": "71.7478"
  }
 },
"phone": "1-477-935-8478 x6430",
"website": "ola.org",
"company": {
  "name": "Considine-Lockman",
  "catchPhrase": "Synchronised bottom-line interface",
  "bs": "e-enable innovative applications"
}
},
{
"id": 7,
"birthdate": "05-19",
"name": "Leanne Graham",
"username": "Elwyn.Skiles",
"email": "Telly.Hoeger@billy.biz",
"address": {
  "street": "Rex Trail",
  "suite": "Suite 280",
  "city": "Howemouth",
  "zipcode": "58804-1099",
  "geo": {
    "lat": "24.8918",
    "lng": "21.8984"
  }
},
"phone": "210.067.6132",
"website": "elvis.io",
"company": {
  "name": "Johns Group",
  "catchPhrase": "Configurable multimedia task-force",
  "bs": "generate enterprise e-tailers"
}
},
{
"id": 8,
"birthdate": "05-22",
"name": "Leanne Graham",
"username": "Maxime_Nienow",
"email": "Sherwood@rosamond.me",
"address": {
  "street": "Ellsworth Summit",
  "suite": "Suite 729",
  "city": "Aliyaview",
  "zipcode": "45169",
  "geo": {
    "lat": "-14.3990",
    "lng": "-120.7677"
  }
},
"phone": "586.493.6943 x140",
"website": "jacynthe.com",
"company": {
  "name": "Abernathy Group",
  "catchPhrase": "Implemented secondary concept",
  "bs": "e-enable extensible e-tailers"
 }
 },
 {
"id": 9,
"birthdate": "05-22",
"name": "Leanne Graham",
"username": "Delphine",
"email": "Chaim_McDermott@dana.io",
"address": {
  "street": "Dayna Park",
  "suite": "Suite 449",
  "city": "Bartholomebury",
  "zipcode": "76495-3109",
  "geo": {
    "lat": "24.6463",
    "lng": "-168.8889"
  }
},
"phone": "(775)976-6794 x41206",
"website": "conrad.com",
"company": {
  "name": "Yost and Sons",
  "catchPhrase": "Switchable contextually-based project",
  "bs": "aggregate real-time technologies"
}
},
{
"id": 10,
"birthdate": "05-31",
"name": "Leanne Graham",
"username": "Moriah.Stanton",
"email": "Rey.Padberg@karina.biz",
"address": {
  "street": "Kattie Turnpike",
  "suite": "Suite 198",
  "city": "Lebsackbury",
  "zipcode": "31428-2261",
  "geo": {
    "lat": "-38.2386",
    "lng": "57.2232"
  }
},
"phone": "024-648-3804",
"website": "ambrose.net",
"company": {
  "name": "Hoeger LLC",
  "catchPhrase": "Centralized empowering task-force",
  "bs": "target end-to-end models"
     }
  }
]

</pre>

The Node.appendChild() method adds a node to the end of the list of children of a 
specified parent node. If the given child is a reference to an existing node in 
the document, appendChild() moves it from its current position to the new 
position (there is no requirement to remove the node from its parent node 
before appending it to some other node).