What is the best way to structure an array with both labels and values in JavaScript?

Being new to Angular, I'm currently working on incorporating FusionCharts to display a chart for my data. To do this, FusionCharts requires a specific format for the data.

const chartData = [{
      label: "2021-09-26T00:01:00",
      value: "250"
    },
    {
      label: "2021-09-26T00:02:00",
      value: "251"
    },
    {
      label: "2021-09-26T00:03:00",
      value: "245"
    },
    {
      label: "2021-09-26T00:04:00",
      value: "248"
    },
    {
      label: "2021-09-26T00:05:00",
      value: "251"
    },];

I have my data separated into two arrays, one for values and the other for labels. But I'm unsure how to convert these arrays into the required format.

I attempted using dictionaries, but they are in {label: value} format which is not compatible with FusionCharts.

arraysangulartypescriptdictionary

Answer №1

To accomplish this task, you can simply use the map() method:

const labels = ['2021-09-26T00:01:00', '2021-09-26T00:02:00'];
const values = ['250', '251'];

const result = labels.map((label, i) => ({ label, value: values[i] }));

console.log(result);

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

Obtaining array pointer in C does not produce the desired result

#include <stdio.h> int* reverseArray(int *arr, int length) { int i; int newArr[length]; for(i = length - 1; i >= 0; i--) { newArr[i] = arr[length - i - 1]; } return newArr; } int main(void) { int array[] = { ...

carrayspointers

"Exploring the world of Angular, promises, and effective caching strategies in

In my Angular application, there is a service responsible for loading items from the server. When an item is selected in a view, the corresponding item should be retrieved from the list and displayed in detail. The issue arises when I reload the page – ...

javascriptangularjstypescript

Divide a flat array into separate subarrays that group together values from consecutive keys in the original array

I used the array_diff function and got this array: Array ( [0] => world [1] => is [2] => a [3] => wonderfull [5] => in [6] => our ) The array has gaps between keys #3 and #5 (missing key #4). How can I split this ...

phparrayskeygrouping

Steps for deleting a row from a two-dimensional array

I am facing an issue that I am unable to resolve. I have created a 2-D array containing dates and prices. My goal is to delete any rows where the date falls between two specified dates. In the example provided, I am looking to delete the third row. Da ...

c#arrays

Ways to utilize the Math.max and Math.min functions within an Array

Attempting to use this approach on an array to retrieve both the minimum and maximum values proved unsuccessful. var array = [3, 6, 1, 5, 0, -2, 3]; var min = Math.min( array ); var max = Math.max( array ); document.write(max); ...

javascriptarrays

The range remains constant even when applying a QUERY within an ARRAYFORMULA

I am attempting to extract specific information from a large spreadsheet containing data. The spreadsheet consists of 2 columns, labeled Email and Reference. I conducted tests using the provided sample: Email Reference --------------------- ...

arraysgoogle-sheetsspreadsheet

Design interactive images in NativeScript

I need assistance setting up clickable images in NativeScript. My goal is to arrange 5 images horizontally, and when one image is clicked, the images to its left should change their values. Here's what I've attempted: <Label col="0" row="0" ...

javascripthtmltypescriptnativescript

Converting a JSON Array Object into PHP script

I need to send this JSON Array from my Android app to a PHP script. I successfully sent the json with one element ('CABECERA'), but now I am struggling with parsing it in my php script. How can I recreate an entire CABECERA object from this json ...

phpandroidarraysjson

What is the best way to divide a string into an array containing both linked and non-linked elements?

I'm struggling to find the right solution to my problem. I need to create a view that is enclosed in a clickable div. The content will consist of plain text mixed with clickable URLs - the issue arises when clicking on a link also triggers the method ...

javascripthtmlangulartypescript

Having a repeating "id" attribute issue in an Angular 2 component

Scenario In the process of creating a customized Angular component for a checkbox, I am faced with a challenge. The component displays a checkbox tag and a label tag together. In order to ensure that clicking on the label will toggle the checkbox, I have ...

angularangular-components

Shiny app experiencing issues with displaying choropleth map

I'm having trouble getting a shiny app to display a plotly map. The map is not rendering properly. I referred to this link for guidance: I came across a similar issue on this platform, but the suggested solution is not working in my case: Plot.ly map ...

rdictionaryplotlyrenderingdisplay

Nested *ngFor Loop in Angular 2

I am facing an issue with my classes Produkt and Werbedaten. The werbedaten class includes a produckt array. My goal is to display a werbedaten array containing the Produkts array using *ngFor export class Produkt { public artikelNummer: number; p ...

angularngfor

How can you activate a checkbox by simply clicking anywhere on the row?

I am working with a list of checkboxes and currently, the user can only activate a checkbox by clicking directly on the checkbox itself. Is there a way to allow users to activate a checkbox by clicking anywhere in the same row as the checkbox? return( ...

javascripthtmlreactjstypescriptcheckbox

When working with Angular 8, you may encounter an issue where the AWSIoTProvider from aws-amplify

After referencing the official link document here, I found that my code works fine with ng serve. However, after building it and trying to access the page, I encountered an error stating "AWSIoTProvider is not a constructor ". Despite searching for a sol ...

angularamazon-web-servicesaws-amplify

Error in Typescript resulting from conditional rendering with props

Consider this straightforward conditional statement with a component return: let content = movies.length > 0 ? movies.map((movie, i) => <MovieCard key={i} movie={movie} />) : null; Upon running Typescript, an error regarding the 'movie&a ...

reactjstypescript

Is it possible to create a customizable template in C++ that can handle both vectors and arrays?

Is it possible to create a function template that can accept both arrays and vectors in C++ programming? ...

c++arraystemplatesvector

Angular 6.0.2 - No specific target found in npm error

After checking the release schedule of Angular, it seems that Angular 6.0.2 has been announced as a stable version. However, I encountered an error named 'notarget' when trying to install this version using npm (error message displayed below). F ...

angularnpmangular6

Storing segments of text in a string array

I'm facing a challenge where I have a lengthy string and need to extract specific substrings from it to store in an array of strings. My attempt using malloc() along with memcpy() isn't yielding the desired results. How can I successfully achieve ...

carraysstring

Refresh a particular tableview cell by updating the local array model

In my current project, I am developing an application where the email list is displayed in a table view. Each email can have one of three states: paid, pending, or dispute. This information is retrieved from a web service response. If an email is in the "p ...

iosarraysswiftuitableview

Is there a way to refactor the onAuthStateChanged function from useEffect in firebase to a class component?

Below is the code snippet used in the function component: useEffect(() => { const unsubscribe = firebase.auth().onAuthStateChanged(user => { setIsLoggedIn(!!user); }); return () => { unsubscribe(); }; }); And here is ...

reactjstypescriptfirebasefirebase-authentication