Saya memiliki javascript untuk mengambil informasi json. Saya akan menyimpan file json ini secara lokal (saya mengunduh file contoh dan menambahkan objek tanggal lahir untuk contoh penggunaan saya dari https:// /jsonplaceholder.typicode.com/users)

Saya mencoba mengurai informasi JSON yang dikembalikan dan memposting konten ke dalam 2 div terpisah. Saya memiliki objek json bernama "tanggal lahir". Dalam skrip saya, saya memiliki set var untuk memanggil tanggal hari ini bernama "hari ini". Ini mencetak tanggal sebagai "05-12" di konsol, dan begitulah cara saya memformat "tanggal lahir" dalam JSON juga. Saya tidak perlu tahun atau waktu.

Yang saya inginkan adalah membuat skrip membandingkan "hari ini" dengan objek json "tanggal lahir". Jika hari ini = tanggal lahir, maka saya ingin informasi entri tersebut ditampilkan di div daftar-pengguna-hari ini untuk muncul di bawah bagian Hari Ulang Tahun pada halaman.

Jika hari ini tidak sama dengan tanggal lahir, saya ingin agar semua entri lain ditampilkan di div daftar-pengguna-masa depan untuk muncul di bawah bagian Masa Depan Ulang Tahun pada halaman.

Tidak ada yang harus diposting di kedua area, hanya satu atau yang lain.

Bantuan apa pun yang dapat diberikan siapa pun akan sangat dihargai. Saya akan memasukkan semua kode saya di bawah ini. Cuplikan mungkin memberikan kesalahan karena saya memiliki jalur lokal ke file JSON alih-alih versi online.

Ini codepen saya, codepen saya tidak memiliki objek JSON ulang tahun https://codepen.io/abc-123-webguy/pen/poegaLq

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>

Skrip JS

// 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>
0
webbin 12 Mei 2021, 23:56

1 menjawab

Jawaban Terbaik