I have javascript to fetch json information. I will be storing this json file locally (I downloaded an example file and added birthdate object for my use example from https://jsonplaceholder.typicode.com/users)
I am trying to parse the returned JSON information and post the contents into 2 seperate div's. I have a json object named "birthdate". In my script, I have a var set to call today's date named "today". It prints the date as "05-12" in console, and that is how I have the "birthdate" formatted in JSON as well. I don't need the year or time.
What I would like is to have the script compare "today" with the json object "birthdate". If today = birthdate, then I would like to have that entry information displayed in the user-list-today div to appear under the Birthday Today section of the page.
If today does not equal birthdate, I would like to have all other entries displayed in the user-list-future div to appear under the Birthday Future section of the page.
Nothing should be posted in both areas, only one or the other.
Any help that anyone could provide would be greatly appreciated. I will include all of my code below. The snippet may give error because I have local path to JSON file instead of online version.
Here is my codepen of it codepen doesnt have the birthday JSON object https://codepen.io/abc-123-webguy/pen/poegaLq
JSON file:
<pre>
[
{
"id": 1,
"birthdate": "05-12",
"name": "Leanne Graham",
"username": "Bret",
"email": "[email protected]",
"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": "[email protected]",
"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": "[email protected]",
"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": "[email protected]",
"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": "[email protected]",
"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": "[email protected]",
"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": "[email protected]",
"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": "[email protected]",
"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": "[email protected]",
"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": "[email protected]",
"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>
JS Script
// Instantiates a new Request object with provided parameteres.
const users = new Request("examplejs.json", {
method: "GET",
"Content-Type": "application/json"
});
// Use the ES6 fetch method to handle the request.
// https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
fetch(users)
.then(response => {
return response.json();
})
.then(data => {
// Loop over each user in the response and send it
// to the renderUser helper.
data.forEach(user => {
renderUser(user);
});
})
.catch(error => {
// If an error is found it will be caught here
// and can be subsequently handled.
console.log('Error Found:', error);
});
// Helper method which renders the user.
renderUser = (person) => {
// Creates a new element and assigns some class names to it.
let userContainer = document.createElement("div");
userContainer.className = "col-xs-12 col-sm-6 col-md-4";
// Configure the innerHTML and use the JSON object passed in from the
// request to formulate the data using ES6 template literals.
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1;
if (dd<10)
{
dd='0'+dd;
}
if(mm<10)
{
mm='0'+mm;
}
today = mm+'-'+dd;
console.log(today);
userContainer.innerHTML = `
<div class="user">
<address>
<strong>${person.name}</strong><br>
${person.birthdate}<br>
${person.website}<br>
<a href="mailto:${person.email}">${person.email}</a>
</address>
</div>`;
// Find the ID 'user-list' and append the userContainer to it.
// This will cause it to display on the page.
document.getElementById("user-list-today").appendChild(userContainer);
document.getElementById("user-list-future").appendChild(userContainer);
} body {
background-color: #efefef;
}
.user {
padding: 15px;
border: 1px solid #e9e9e9;
border-bottom-color: #d5d5d5;
border-bottom-width: 2px;
border-radius: 4px;
background-color: #fff;
color: #000;
margin: 5px;
}HTML
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
background-color: #efefef;
}
.user {
padding: 15px;
border: 1px solid #e9e9e9;
border-bottom-color: #d5d5d5;
border-bottom-width: 2px;
border-radius: 4px;
background-color: #fff;
color: #000;
margin: 5px;
}
</style>
</head>
<script src="examplejs.js"></script>
<body>
<h1 style="text-align:center;">Birthday Today</h1>
<div class="container">
<div class="row">
<div id="user-list-today"></div>
</div>
</div>
<h1 style="text-align:center;">======================================================================================================</h1>
<h1 style="text-align:center;">Birthday Future</h1>
<div class="container">
<div class="row">
<div id="user-list-future"></div>
</div>
</div>
</body>
</html>This is because you are appending the same node to two different divs. If you look at the documentation to appendChild here, you can see this:
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).
So in your renderUser function you should separate today users from future users and append each one accordingly.
As an example, here each user is appended randomly to either list; see the only change near the end of the renderUser function: https://codepen.io/maeriens/pen/wvJMjqG