Ways to organize JSON data from a fetch request into multiple divisions

I have written a JavaScript code to fetch JSON information. I plan on storing this JSON file locally (I downloaded an example file and added a birthdate object for my usage example from https://jsonplaceholder.typicode.com/users)

My goal is to parse the returned JSON data and display the contents in two separate divs. The JSON object that I have created is named "birthdate". In my script, I have a variable set to get today's date called "today". It displays the date as "05-12" in the console, which matches the format I have used for the "birthdate" object in the JSON. I only need the day and month.

What I aim for is to compare "today" with the "birthdate" in the JSON. If they match, I want the corresponding user entry to be displayed in the user-list-today div under the Birthday Today section of the page.

If "today" does not match the "birthdate", I want all other entries to be displayed in the user-list-future div under the Birthday Future section of the page.

Each entry should only appear in one of the sections, not both.

Any assistance offered would be highly appreciated. Below, you will find the complete code. Please note that the snippet may throw an error due to the use of a local path for the JSON file instead of an online version.

You can also view my codepen here: https://codepen.io/abc-123-webguy/pen/poegaLq

JSON file:

<pre>
[
   {
     "id": 1,
     "birthdate": "05-12",
     "name": "Leanne Graham",
     "username": "Bret",
     "email": "[email protected]",
     ...
   },
   {...},
   {...}
]
</pre>

JS Script
...
HTML CSS Code
...
javascriptjsonajaxfetchinnerhtml

Answer №1

The issue arises when you attach the identical node to two separate div elements. By referring to the appendChild documentation found here, it clarifies:

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

To rectify this issue in your renderUser function, it's crucial to segregate today's users from future users and append them individually.

For instance, within this scenario, each user gets appended randomly to either list; note the modification made towards the end of the renderUser function: https://codepen.io/maeriens/pen/wvJMjqG

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Submitting JSON through JQuery to a Spring Roo Handler

Encountered an issue with using JQuery and Spring Roo recently. Wanted to post data to a JSON enabled URL of a Spring Roo controller. The controller worked fine when posting data via Curl command: curl -i -X POST -H "Content-Type:application/json" http:// ...

jqueryjson

The name 'withStyles' is nowhere to be found

import * as React from "react"; import Button from "@material-ui/core/Button"; import * as PropTypes from "prop-types"; import {WithStyles} from '@material-ui/core'; import "./App.css"; import PageTwo from "./components/PageTwo"; ...

javascriptreactjstypescriptmaterial-ui

Searching for a child tag in JSON using C#

Is there a way to retrieve the id value of the child elements in this code using C#? I am currently working with C#. While I am able to extract the result value, I am struggling to access the "id" value from the result. Thank you for your help. var job ...

c#json

Creating a default option in a Select tag with React when iterating over elements using the map method

After learning that each element in the dropdown must be given by the Option tag when using Select, I created an array of values for the dropdown: a = ['hai','hello','what'] To optimize my code, I wrote it in the following ...

javascriptreactjstypescript

The format for a DateTime field in a JSON string array is as follows: yyyy-MM-dd hh:mm:ss

I am working with a JSON array string pulled from a database and I need to format the DateAndTime field into yyyy-MM-dd hh:mm:ss. This formatting needs to be flexible as the data passed through will vary, except for the DateAndTime. Here is my current att ...

javascriptarraysvb.netjson

Organizing Results into Divs Based on Column Value Using AngularJs

I've been racking my brain trying to figure out the best way to organize and display my results in separate divs, specifically using Bootstrap col-md-4's. This is for a chat messaging app that I'm in the process of developing. I have rooms a ...

javascriptangularjslogicresultset

How to iterate over JSON data using jQuery and showcase it in a table

I'm struggling with rendering specific values from a JSON object in a tabular format through looping. I want to create a new row for each instance of data. Check out the CodePen link I've shared below for testing purposes. Any help on what I migh ...

jqueryjson

Is it possible to replace JavaScript files that are included in my index page if I am utilizing conditional comments specifically for IE9?

My website works perfectly in all browsers, except for IE9. After some investigation, I discovered that the issue lies with a jQuery plugin called multilevelpush.js. While it works great on other browsers, it simply won't cooperate with IE9. Upon fur ...

javascriptjqueryhtml

How to extract information from a Spark dataframe column containing a JSON string with an array of strings

I'm currently working on reading a JSON file and parsing the 'jsonString' along with its underlying fields, including arrays, into a pyspark dataframe. Below is the content of the JSON file: [{"jsonString": "{\"uid\":\"value ...

arraysjsonapache-sparkpysparkapache-spark-sql

Exploring advanced slot functionality in VuetifyJS through autocomplete integration with Google Places API

How can I make VuetifyJS advanced slots work seamlessly with the Google Places API? Currently, some addresses appear in the autocomplete dropdown only after clearing the input text by clicking the "x" icon in the form field. To see the problem in action, ...

javascriptvue.jsgoogle-places-apivuetify.jsgoogle-places

What is the safest way to convert a local file path to a file:// URL in Node.js?

In my node.js application, I am faced with the task of converting local file paths into file:// urls. After some research, I came across the File URI scheme on Wikipedia and I believe that there must be a solution out there or perhaps even an npm module t ...

javascriptnode.jsurlnpm

Error encountered in my JavaScript file - Unexpected Token < found on line 1 of the loadash.js script

I am right at the end of creating a sample dashboard with charts using dc.js, but I have hit a roadblock with one error remaining. This error is causing an issue. Unexpected token < on line 1 for loadash.js. The loadash.js file is valid, but for som ...

javascripthtml

The state variable remains undefined even after integrating useEffect in a React.js component

Hello, I have a component within my React application that looks like this: import React, { useEffect, useState } from "react"; import AsyncSelect from "react-select/async"; import { ColourOption, colourOptions } from "./docs/data"; const App = () => ...

javascriptreactjs

What is the best way to find out if multiples of a specific time interval can evenly divide the time between two

I'm currently utilizing Luxon for handling dates and durations. I have two specific dates and an ISO duration, and I am looking to figure out how to determine if the interval between the dates is a multiple of the specified duration without any remain ...

javascripttypescriptdatetimeluxon

The modal window obstructs my view on the screen

You are working with a modal form that triggers a POST method in your controller Here is the view code: <div class="modal fade" id="agregarProducto"> <div class="modal-dialog" role="document"> <div class="modal-content"> ...

javascriptjqueryasp.net-mvcformsmodal-dialog

"Stay current with real-time updates in seconds using React technology

Check out this code snippet: const currentTime = new Date().getTime(); const targetTime = new Date('November 15, 2020').getTime(); const difference = currentTime - targetTime; let seconds = Math.floor(difference / 1000) % 60; setInterval(functio ...

javascriptreactjstime

Using jQuery to iterate through JSON data obtained from a web service

In this code snippet, I am attempting to retrieve a JSON response from a PHP page and then iterate through it to display the name field of each JSON object. However, for some reason, nothing is being alerted out. <html> <head> <title>A ...

javascriptjqueryjson

Ways to categorize by a particular date

const vehicleDetails = [ { "record_id": "2ff8212f-5ec9-4453-b1f3-91840a3fb152", "status_date_activity": { "On Rent": 1662021991000 } }, { "record_id": "c8c1 ...

javascriptnode.jsarraystypescriptreduce

Bundling extraneous server code in client rollup

Can someone help me understand why the following code is being included at the top of my browser bundle by Rollup? It seems like these references are not used anywhere from my entry point. Could it be default includes from node builtins? import require$$0$ ...

javascriptnode.jsbundling-and-minificationrollup

What is the recommended way to include an image in a v-for loop in Vue.js?

I have attempted various online solutions, but I am still unable to display images on the screen. Could it be a simple mistake? The file names and folders are accurate. When providing the path, I aim to retrieve the image associated with the sub-club name ...

javascripthtmlcssimagevue.js