Generate a Year attribute value using the information from the year field in a JSON document

Currently, I am exploring the functionalities showcased in this example:

I am interested in adapting the following code snippet to work with my JSON file, which lacks a specific date data type field but includes a 'Year' value:

// Transform Year values into a standardized format for filtering purposes.
data.features = data.features.map(function(d) {
    d.properties.Year = new Date(d.properties.Year).getYear();
    return d;
});

My JSON structure resembles the one shown below:

{
   "type": "FeatureCollection",
   "features": [
  {
    "type": "Feature",
    "geometry": {
       "type": "Point",
       "coordinates":  [ 34.7615574,32.0638934 ]
    },
    "properties": {
    "Cinema":"אביב",
    "Number of Records":"1",
    "Number":1,
    "Screens":1,
    "Seatss":0,
    "Year":1948
    }
  },

I need to modify this code to generate filterable output that can be integrated with a range slider by year.

Since I am relatively new to D3 and Mapbox technologies, any guidance or suggestions would be highly valuable.

Below is the complete code snippet that I am attempting to implement:

javascriptjsond3.jsmapbox

Answer №1

The map filter is currently set up to expect the year value, but it's receiving something different.

We can extract and process the year within the slider event.

var Year =  parseInt(Years[e.target.value]);

To accommodate the parsed year, the filter function has been revised.

function filterBy(Year) {
    var filters = ['==', 'Year', Year];
    map.setFilter('cinema-circles', filters);
    map.setFilter('cinema-labels', filters);

    // Display the Year as a label
    document.getElementById('Year').textContent = Year;
}

The JSON data remains unchanged.

  data.features = data.features.map(function(d) {
      return d;
  });

The initial year for filtering has been updated to 1914.

    filterBy(1914);

In addition:

Due to the "year 2000 problem," the getYear() method has been replaced with getFullYear().

Plnkr: http://plnkr.co/edit/QhWXHUmkSApyfynpmGzN?p=preview

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

Need help setting parsed values on jQuery Autocomplete after Keyup event?

I am using the Bing API to retrieve values by accessing this link: When I parse and append the results on keyup, it works fine. However, when I try to set the results on jQuery's autocomplete, it does not display properly. For example, you can view ...

javascriptjqueryajaxjson

Retrieve specified elements from Bootstrap SelectPicker

My coffee selection script uses the Bootstrap SelectPicker plug-in to choose my favorite coffees. After submitting the form, I want to save the selected values and send them to addCoffee.php?coffee=${coffee}. How can I achieve this? HTML: < ...

javascriptjqueryajax

Is there a neat method in React and Material UI for de-structuring the props that I am passing to useStyles?

When passing props to useStyles based on the Material docs, our code looks like this: const useStyles = makeStyles({ // style rule foo: props => ({ backgroundColor: props.backgroundColor, }), bar: { // CSS property color: props => ...

javascriptreactjsecmascript-6material-ui

What is the best way to design a footer that remains fixed at the bottom of the screen but becomes unfixed when the user scrolls down?

Currently, I am working on creating a footer that remains fixed at the bottom of the user's screen regardless of the screen size. However, I also want the header to transition from a fixed position to being part of the page when the user scrolls down. ...

javascriptjquerycssscroll

How to target the last child in Flexbox using CSS order property

Is there a way to correctly detect the last child after rearranging divs using flex order? Even though I have set the order in the CSS, it is still recognizing the last child based on the DOM tree. Since the items are dynamic, we can't rely on nth-chi ...

javascriptjquerycss

What is the best way to convert a date to ISO 8601 format using JavaScript? Are there any built-in functions or methods in

Currently, I am using this function to set the duration: const setDuration = () => { const currentDate = new Date(); const newDate = new Date(currentDate.getTime()); const year = newDate.getUTCFullYear(); const m ...

javascriptnode.jsreactjsangularnext.js

The final condition of the ternary operator fails to render if the specified condition is satisfied

Having trouble identifying the issue with this ternary statement. The last element (blurredscreen) is not appearing when authStatus !== "authenticated". return ( <> <div key={"key-" + id}> {isO ...

javascriptreactjs

Tips for triggering the JavaScript function within dynamically created textboxes on an ASP .NET platform

I have developed code that dynamically creates textboxes in a modal pop-up each time the add button is clicked and removes them when the remove button is clicked. The validation function in this code checks for valid month, date, and year entries in the te ...

javascriptc#jqueryasp.net

What could have occurred if you reassigned setInterval to a variable within the useEffect hook?

Can multiple setInterval functions be defined repeatedly to the same variable in a React hook useEffect? After checking, I found that the variable has a new setInterval id value every time it is defined. However, I am curious if there are any instances re ...

javascriptreactjssetintervaluse-effect

Learn how to efficiently transfer row data or an array object to a component within Angular by utilizing the MatDialog feature

My goal is to create a functionality where clicking on a button within a specific row opens up a matDialog box displaying all the contents of that row. Below is the HTML snippet: <tr *ngFor="let u of users"> <td data-label="ID& ...

javascriptcssangulartypescript

Is there a way to format this into four columns within a single row while ensuring it is responsive?

I am working on a layout with a Grid and Card, aiming to have 4 columns in one row. However, the 4th column ends up in the 2nd row instead, as shown below: https://i.sstatic.net/gOeMm.png My goal is to align all 4 columns in a single row. Additionally, w ...

javascriptreactjsmaterial-ui

A specific div remains in place as the user scrolls

Imagine a div that is positioned 60px from the top of the screen. What if, as you scroll down, it stops when it reaches 10px from the top and remains there for the rest of your scrolling session? And then, when you scroll back up, it goes back to its ori ...

javascripthtmlcss

Ionic JavaScript function runs independently of promise resolution

Within my ngOnInit on a page, I have a method that is meant to fetch data. However, it seems like the other methods in the chain are executing before the fetch data process is complete. Here's a snippet of the code: ngOnInit() { this.devicesinfo.fetc ...

javascriptangularionic-framework

"Dealing with an unspecified number of fields in an ExtJS data model

I have a data model that is designed to accommodate various incoming data by keeping it generic and allowing for the addition of multiple meta data tags to my project. How can I effectively map these data fields to the Model or access them in the array w ...

javascriptextjsextjs4.2

Storing JWT securely in cookie or local storage for a Node.js/Angular 2 web application

I've been researching how to save jwt tokens in either local storage or cookies but I'm having trouble finding clear instructions online. Can someone provide guidance on how to instruct the server to recognize a user for future sessions? //a ...

javascriptnode.jsangularjwt

Receiving a Promise<fullfield> as a result

I have a situation where I am adding several promises to an array: const apiCallsToMake = []; apiCallsToMake.push(this.getDataFromUnsplash(copyInputParams)); apiCallsToMake.push(this.getDataFromPexels(copyInputParams)); apiCallsToMake.pu ...

javascripttypescriptasynchronousasync-await

The art of iterating through a JSON array of objects using Python

What is the most efficient method to loop through an array of objects and utilize that data to update specific rows in a database table? I aim to update records from the database where id = tasklist, Based on the provided JSON below, I want to set the va ...

pythonjsonpython-3.xloopsobject

Showing nested JSON data in ng-repeat

Currently, I'm struggling to understand how to access nested JSON and show it on a page using Angular. For instance, consider the JSON structure below where I want to display connectivity products under portfolio using ng-repeat... { "addons": [ ...

javascriptjsonangularjs

Angular Starter Kit

When starting with Angular.js, there are various boilerplate kits available such as angular-seed, some incorporating requirejs and more. However, many of the options I've come across seem to be outdated. As a newcomer to Angular, I'm wondering if ...

javascriptangularjs

Sending C# Model from View to Javascript

I have set up my ViewModel for the View: public class DashboardViewModel { public List<UserTask> UserTasks {get; set;} public List<WorkItem> WorkItems {get; set;} } In the View, I am looping through the WorkItems as follows: ...

javascriptc#asp.net-mvcrazormodel