Discover and update values in JSON using JavaScript

Currently, I am working on generating graphs using d3.js with a JSON file as the input. My main challenge lies in parsing the date and time format for the x-axis. Below is the code snippet that I have attempted:

d3.json('data/fake_users11.json', function(data) {

var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;
var old = JSON.stringify(data).replace(/\//g, "-");
data = JSON.parse(old); //convert back to array
data.forEach(function(d) {
    d.date = parseDate(d.date);
});

The structure of the JSON file looks similar to this:

[
    {
        "date": "02\/18\/2016 18:02:38",
        "value": 10
    },
    {
        "date": "02\/18\/2016 18:02:45",
        "value": 20
    },
    {
        "date": "02\/18\/2016 18:02:50",
        "value": 30
    }
]

My goal is to achieve the format "02-18-2016 18:02:50", however, I keep running into errors. I feel like I am very close to the solution but missing something critical. Could someone please help me identify the mistake here? Your assistance is greatly appreciated.

Answer №1

It seems like there might be a mistake in the formatting you're using.

Your dates have the year at the end, but you're trying to parse it at the beginning:

var parseDateWrong = d3.time.format("%Y-%m-%d %H:%M:%S").parse;

Instead, it should be:

var parseDateOk = d3.time.format("%m-%d-%Y %H:%M:%S").parse;

You can check out this example on jsfiddle to see what I mean.

I believe you can now directly use the JSON without replacing the / with -:

var parseDate = d3.time.format("%m/%d/%Y %H:%M:%S").parse;

data.forEach(function(d) {
    d.date = parseDate(d.date);
});

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

Is randomly pairing 2 datapairs after slicing a JSON array easy or challenging?

There is a JSON file containing an unlimited number of users [{ "fname": "Hubert", "lname": "Maier", "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bd ...

Tips for adjusting the placeholder color in Material UI using React JS

Is there a way to customize the background color and flashing color of the Skeleton component in Material UI? I would like to implement custom styling for it, similar to what is shown below: <Skeleton variant="circle" classes={{root:'pla ...

What is the best way to accurately parse a Date object within a TypeScript class when the HttpClient mapping is not working correctly?

Task.ts: export class Task { name: string; dueDate: Date; } tasks.service.ts: @Injectable() export class TasksService { constructor(private http: HttpClient) { } getTasks(): Observable<Task[]> { return this.http.get<Ta ...

The $http.get() function in Angular fails to function properly when used in Phonegap DevApp

Trying to retrieve a JSON file in my Phonegap App using angulars $http is causing some issues for me. I have set up this service: cApp.factory('language', function ($http) { return { getLanguageData: function () { return ...

Guide to installing a dynamic favicon on a Next.js application for a specific route

I am trying to set up different favicons for my Next.js app based on the route. Here is where I want to implement this feature, displaying the country's flag as the favicon when a user navigates to that specific page. Below is the code snippet from m ...

What are the steps to gather user data and generate a roster of individuals currently online?

I am currently working on a way to gather information about the users who are currently logged into my website. Here's how it works: When a user enters my website, they have the option to choose a nickname using an input box. Then, there are five diff ...

The JSON data is not showing the ID information

I am currently working on a project where I need to pull data from a JSON file and display it on a website. However, I am facing an issue where the ID is not being displayed for some reason. Can someone provide guidance on how to fix this? function getJ ...

Acquire the "value" and utilize it within a different function

I am facing a minor issue with my JavaScript code. I have been working on creating a gallery page. In this page, there is an icon that triggers a function called "comment" when clicked. function comment() { var div = document.getElementById("commentdiv") ...

Looking to Share Your Words on Tumblr?

When it comes to interacting with Tumblr, I have no issues using the GET method. However, as soon as I attempt to use the POST method for my Tumblr blog, an error is thrown: ({"meta":{"status":401,"msg":"Not Authorized"},"response":[]}); Below is the cod ...

What is the best way to access data from this $scope in AngularJS?

Upon printing selecteditems to the console, this is the output: [{"model":"Lumia","brand":"Nokia","subModel":["Lumia 735 TS","Lumia 510"],"city":"Bangalore"}] I have stored it in $scope.details as follows: var selecteditems = $location.search().items ...

Customizing Images using a JSON array of images

Looking to implement a feature that displays images fetched from a CMS via a JSON file. The JSON data structure is as follows: { "images": [ {"title": "Image One", "url": "image1.jpg"}, {"title": "Image Two", "url": "image2.jpg"}, {"title": "Ima ...

Who needs a proper naming convention when things are working just fine? What's the point of conventions if they don't improve functionality?

I am a newcomer to the world of JavaScript programming and stumbled upon this example while practicing. <html> <head> <script type="text/javascript"> function changeTabIndex() { document.getElementById('1').tabIndex="3" d ...

Share a Node.js Express.js npm package for universal access within the project

Here is my current folder structure. /app.js /src /routes /controllers Within the routes folder, there are multiple javascript files that all require the passport.js package like so: const passport = require('passport'); Is it possible to c ...

When using Google Chrome, the window.open function may encounter issues when opening a CSV file that contains a '#'

window.open(encodeURI('data:text/csv;charset=utf-8,name,color\njohn,#000000')); When running the above line in Chrome, a downloaded csv file is generated with the following content: name,color john, The issue here is that it appears to be ...

What is the best way to navigate to a specific location on a web page?

After clicking the "Add comment" link, a comment form popped up using Ajax. I now need assistance with scrolling to it, can you please help me out? ...

What is the best way to extract multiple variables from a function in JavaScript?

After creating the function buttonEffects() with four different button effects, I am now facing the challenge of bringing these variables outside of the function and using them in another function. Is it possible to achieve this without recoding everything ...

Troubleshooting issue with refreshing selectpicker in Bootstrap-select and Vue.js

Incorporating the bootstrap-select plugin (found at ) into a ruby on rails app with Vue.js as the javascript framework has been my latest project. The goal is to have two select options where one selects a category and the other displays all available tea ...

I'm encountering an error when trying to pass multiple parameters in an AJAX request

I am trying to pass three parameters to my ajax code. Here is the snippet of my code: $(document).ready(function () { SearchText(); }); function SearchText() { $("#txt712").autocomplete({ source: function (request, resp ...

Angular 2: Harnessing the power of Observables with multiple Events or Event Handlers

In the component template, I have grouped multiple Inputs and their events like this: <tr (input)="onSearchObjectChange($event)"> <th><input [(ngModel)]="searchObject.prop1"></th> <th><input [(ngModel)]="searchObje ...

Gathering information from an HTML form and displaying it through JavaScript by utilizing Bootstrap's card component

I've been working on integrating form data from my index.html page into a card component using Bootstrap. I've successfully collected the data in the backend, but now I'm struggling to display it on the frontend as a card component. Any help ...