Iterating through data to showcase vertical columns for a specific time span of 3 years, highlighting only the months with available data

If data has been available for every month over the past 3 years, I need it to be displayed in a specific format. You can refer to this example fiddle for reference: https://jsfiddle.net/bthorn/ncqn0jwy/

However, there are times when certain months may not have any data, and in such cases, those months should not be shown in the final output.

In an attempt to manipulate the data, I created another fiddle where I tried looping through the data. Here's the link to that fiddle: https://jsfiddle.net/bthorn/2zkhk3dt/1/

The initial step was to loop over the years to extract distinct year values:

for (var y in data) {
   if (typeof(uniqueYears[data[y].year]) === "undefined") {
     distinctYears.push(data[y].year);

      year = data[y].year;
        if (year === "" || year === null) {
           year = "";
        }

     strResult += "<th style='text-align:left;'><h2>" + year + "</h2></th>";
     //console.log(year);


     uniqueYears[data[y].year] = 0;


   }
}

Subsequently, I attempted to loop over the months while considering the year value. However, this approach did not yield the desired output which necessitated further exploration of how to integrate my data into the year/month fiddle.

I even tried implementing a function to iterate through all data outputs corresponding to the year/month combination but only ended up with August 2015 being displayed consistently despite extensive debugging efforts.

Update

The first fiddle is meant to display data for 4 months in 2015 from a folder, leaving the rest as blank placeholders.

https://i.sstatic.net/qxVpg.png

Update 2:

A visual representation of the result obtained from combining the data with the year/month loops reveals inconsistencies within the output.

https://i.sstatic.net/KwoB3.png

Update 3

In the third fiddle, a function was created to cross-check and validate the data against the expected year/month combinations. However, the returned result only matches August 2015.

https://jsfiddle.net/bthorn/rsu7mxbm/

Answer №1

To successfully add links to the months that appear in the data, you will need to iterate through all 12 months. For a working example, refer to this jsfiddle

var months = [
          { number: '01', title: 'January' },
          { number: '02', title: 'February' },
          { number: '03', title: 'March' }, 
          // truncated for brevity
        ];

var data = [{
  // various file data entries
}];

// rest of the code omitted for conciseness

... (remaining code continues)

$("#divResult").html(strResult);

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

Tips for effectively arranging images in a spiral formation

I'm striving to replicate the layout showcased in this screenshot : https://i.sstatic.net/RBg62.jpg My attempt involved utilizing columns with bootstrap 4. Initially, the layout appeared intact, but the elements being within a container-fluid caused ...

Unlocking the power of localhost on your mobile device

Currently, I am working on a web application that utilizes Laravel for APIs and React for the frontend. My goal is to test this application on a mobile device. While testing React in isolation works fine, I am encountering issues with backend data such a ...

Utilize Optional Chaining for verifying null or undefined values

I have utilized the following code: data?.response[0]?.Transaction[0]?.UID; In this scenario, the Transaction key is not present, resulting in the error message: ERROR TypeError: Cannot read properties of undefined (reading '0') Instead of chec ...

Access the CSV file using Office365 Excel via a scripting tool

Objective I want to open a CSV file using Office365's Excel without actually saving the file on the client's machine. Challenge The issue with saving raw data on the client's machine is that it leads to clutter with old Excel files accumu ...

Converting Emoji to PNG or JPG using Node.js - What's the Procedure?

Currently, I am working on a project that requires me to create an image file from emoji characters, preferably using Apple emoji. Initially, I thought this task would be simple to accomplish, but I have encountered obstacles with each tool I have tried. ...

The term "Cardlist" has not been defined and is therefore causing an

I created a CardList and attempted to add cards into the list using map, but encountered an error import React from 'react'; import Card from './Card'; const CardsContainer = ({robots}) => { const cardComponents = robots.map((r ...

Setting the z-index for a JavaScript plugin

I need help with embedding the LinkedIn plugin into a website that has stacked images using z-index for layout. I have tried assigning the plugin to a CSS class with a z-index and position properties, but it hasn't worked as expected. Can anyone sugge ...

Is it possible to target a specific element within one of two classes that share the same name using CSS or XPath in Webdriver.IO?

Currently, I am using Webdriver.io and facing a challenge in selecting an element within the "text-fields-container" class. This particular element happens to be a password field, and both classes share the same name. Can someone guide me on how to go abou ...

"Exploring the Art of Showcasing Duplicate Image Count from User Input in an

I need to showcase multiple duplicates of 2 different images on a webpage. Users are asked for the duplication speed, which I have already implemented, and also how many copies of each image they want. function show_image() { var img = document.create ...

Seamless blend of images with a stunning mosaic transition effect

I attempted to create a mosaic effect on my carousel similar to this example: , but not exactly like this. I want to include control buttons for next and previous, and have images in HTML tag. However, my attempt is not working and I need help. This is ...

muiSlider limited to specific range

I am currently using the Mui Slider component for a user interface where I need to restrict its value within a certain range. For example, I want the slider's handle to become unmovable after reaching 50. Users can still select values up to 50, but th ...

What is the best way to clear radio button selections in a form using reactjs?

I designed a survey form with 4 radio buttons for a single question. I also included buttons to submit the form and clear input fields. However, when I click on "Clear Input," the checked radio buttons do not get cleared. How can I achieve this using the r ...

Is there a different method for looping in JSX besides .map()?

In my JSX code, I am attempting to display a specific value based on certain conditions. The current code snippet checks if the 'item.result' exists and has a length greater than 0. If so, it maps through the 'item.result' array and dis ...

Triangles without their pointed tips

The left arrows next to the carousel blocks are missing their tips. I'm not sure what else needs to be added in the CSS to complete the triangle shape. Here is the live URL: (located next to the large image, specifically in the information carousel) ...

What is the best method for scrolling down a JavaScript table using Selenium in Python?

My dynamic table is created using JavaScript. When the page loads, only the first elements are visible in the source code. This means that when I try to scrape values from the table, only the initial parts are retrieved. Before scraping, I need to scroll ...

Adjust the text color of a div element by clicking a button with the help of JavaScript

I am trying to change the font color of my div when a button is clicked using JavaScript. The two buttons I have are 'Green' and 'Red'. <button type="button" class="green">Green</button> <button type="button" class="red" ...

The webpack production build consistently displays the message "This site is running on the development build of React."

I have been attempting to utilize webpack-4 for generating a production build of my React project (not built with Create React App), but I am facing difficulties. The project is written in TypeScript and uses ts-loader, as well as React version 15.6.2. Be ...

Live Edit API

Currently, I am developing an application that requires near real-time collaborative editing capabilities for documents, similar to the functionality found in Google Documents. Since I am a beginner in this area, I would greatly appreciate any information ...

Tips for moving a title sideways and adjusting the bottom section by x pixels

I am seeking to accomplish a design similar to this using CSS in order to create a title of <h1>DISCOVER <span>WEB 3</span> DIMENSIONS</h1>. How do you recommend achieving this? Thank you, I have searched on Google and asked frie ...

The issue arises when React child props fail to update after a change in the parent state

Here's the main issue I'm encountering: I am opening a websocket and need to read a sessionId from the first incoming message in order to use it for subsequent messages. This should only happen once. I have a child component called "processMess ...