A Web Service I'm working with is returning the following Json data:
[{"DailyHedge": "1.3414894654050926"},
{"OptimalHedge": "1.6788094119827568"}]
To visualize this data using d3js, I need to transform it into the format below:
[{"category": "DailyHedge", "measure": 1.3414894654050926},
{"category": "OptimalHedge", "measure": 1.6788094119827568}]
I've been exploring options like underscore.js, but still unsure about the best approach for this transformation.
You have the option to accomplish this task using plain, vanilla JavaScript; however, given that you are utilizing D3, it can be achieved more efficiently with d3.keys and d3.values.
As specified in the API documentation, d3.keys:
Returns an array containing the property names of the specified object (an associative array). The order of the returned array is undefined.
And for d3.values:
Returns an array containing the property values of the specified object (an associative array). The order of the returned array is undefined.
Below is a demonstration:
var data = [{
"DailyHedge": "1.3414894654050926"
}, {
"OptimalHedge": "1.6788094119827568"
}];
var newData = [];
data.forEach(function(d) {
newData.push({
category: d3.keys(d)[0],
measure: +d3.values(d)[0]
});
});
console.log(newData)<script src="https://d3js.org/d3.v4.min.js"></script>If you opt for vanilla JavaScript, you can utilize Object.keys and Object.values. Nonetheless, please note that Object.values is not compatible with IE, Opera, or Safari. An alternative approach would involve using a for...in loop.
Below is a simple implementation using vanilla JavaScript:
const data = [{ "DailyPerformance": "1.3414894654050926" }, { "OptimalPerformance": "1.6788094119827568" }];
const newData = [];
for (let index in data) {
let object = data[index];
Object.keys(object).forEach(key => {
let row = { "category": key, "measure": object[key] };
newData.push(row);
});
}
console.log(newData);I need to determine which routes to hide based on a condition that evaluates to true or false. I have a collection of routes, such as: - Products - Clients For instance, if a user logs in but does not have the permission to edit products, then the updated ...
import React from 'react'; import ReactDOM from 'react-dom'; import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme'; import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; import getMui ...
Am I supposed to follow this format? from tornado import web class MyHandler(web.RequestHandler): def get(self, command): details = {'status':'success'} json_data = json.dumps(details) self.write(json_data) ...
I am having trouble retrieving the value for <td> Value3 How can I navigate through this DOM to extract the value from <td>? <table> <thead> <tr> <th col="value2"></th> </tr> </thead&g ...
Currently, I am utilizing the Facebook Graph API to retrieve gender information from a list of Facebook users. I possess the user's IDs (who are current users of my application). In this case, special permissions are not required to access gender info ...
I am attempting to implement an image switch feature based on the selection made in a dropdown menu. The HTML and JavaScript code are stored in separate files. Here is a snippet of the HTML code: <select id="Breed_0_field" name="Breed76" onChange="ja ...
Currently, I am utilizing sequelize to define my Model with postgres. Here is the structure that I currently have: @Options({ sequelize: db.main, freezeTableName: true, paranoid: true, tableName: 'artist', timestamps: true, indexes: [{ uniqu ...
Implementing Firebase authentication on my website, I'm looking to pass the user const into Express for routing purposes. Here's the function responsible for creating a new user: const signupForm = document.getElementById('signup'); if ...
Apologies for asking about this topic again, but I have been unable to find a solution where the image fills 100% of the height. If you'd like to see the issue in action, here's a link to the jsfiddle: http://jsfiddle.net/BBQvd/3/ I'm just ...
Is it possible in javascript to combine specific fields from multiple objects into a single string without using a for loop? var theArray = [{ field1: "TEXT", field2: "VAL" ... }, { field1: "text", field2: "val" ... } ... ]; I am interested in find ...
I am currently developing a form in Angular/Typescript with more than 10 fields, and I want to streamline error management without redundancy in my HTML code. Here is an example of the form structure : <form [formGroup]="myForm"> <label&g ...
When a UUID already exists in completed questions, the question is skipped and the next one is displayed. The auto-increment feature does not work as expected when using this.setState({autoIncrement:this.state.autoIncrement+1}) to move to the next question ...
Planning on creating a real-time weather application using jQuery, I have encountered a slight issue. Within my jQuery code, I have defined two variables named 'latitude' and 'longitude' to hold the current location coordinates. Upon po ...
Looking to implement a RESTful call with Angular 2 that constantly updates whenever there are changes in the API. In my service, I've included an Observable to fetch data from the API: getData(): Observable<any[]> { return this.http.get(url) ...
For over a year, our website has been functioning perfectly. However, with the release of Firefox4, we have noticed a new issue. Occasionally, the page hangs randomly. I have tested the website on IE8/9, Chrome10+, Safari, and Opera, and the issue only see ...
I recently started working with vuejs and decided to create custom components for elements like buttons, links, inputs, etc. Here is an example of my input component- <template> <div class="position-relative"> <input :c ...
I am seeking a way to send a JSON object from my server to the client side via AJAX, allowing me to access the data on the client side. @GET @Produces("application/json") @Consumes("application/json") @Path("/getStatus/") public void getStatus ...
I am facing an issue where I have a webpage that loads HTML sections through an AJAX call. The response includes both HTML and JavaScript files. Currently, I am trying to figure out how to set a debug point on the JavaScript file. In Internet Explorer, I ...
Utilizing the JavaScript Array Every method for validation, I encountered an issue when passing arguments with a specific condition while using the JavaScript arrow lambda callbackFn. To illustrate the problem, let's consider a simple example. The s ...
I have encountered an issue with my state setup and reducer logic. Here is how my state is initialized: const initialState: PhotoState = { photos: [], }; The reducer function is defined as follows: const initialState: PhotoState = { photos: [], }; ex ...