I am seeking the output to be presented in a specific format

I am currently working on creating a timeline map using echarts js. However, I am facing difficulty in figuring out how to create the necessary 'options'. When I run the following code, I get the 'option' as shown below:

import axios from 'axios'

const data = []
const date= []
let options= []

axios.get('https://data.nepalcorona.info/api/v1/covid').then((res) => {
  const array = res.data
  const groups = array.reduce((groups, info) =>{
    const date = info.reportedOn;
    if (!groups[date]) {
      groups[date] = [];
    }
    groups[date].push(info);
    return groups;
  }, {});
  const groupingDate = Object.keys(groups).map((date) =>{
    return{
      date: date,
      infos: groups[date]
    };

  })
  const sortedData = groupingDate.sort((a,b) => {
    var dateA = new Date(a.date) , dateB = new Date(b.date)
    return  dateA - dateB
  })
  for(let i=0; i< sortedData.length; i++) {
    date.push(sortedData[i].date)
    const array = sortedData[i].infos
    data.push(array)
  }
  const points= [];
  const newlist = data.map(x => {
    points.push([x[0].point.coordinates[0], x[0].point.coordinates[1], x[0].age]);
    return {
      series:{
        data: points.slice(0)
      }
    }
  })
  options.push(newlist)
  console.log(options)
})
export default {
...
options: [options][0],
...
}

The generated result is displayed below: https://i.sstatic.net/vx1P5.png

However, I do not want an unnecessary array like the one obtained. Instead, I require the 'options' to be in the following format:

options: Object ---baseOption: Object ---options: Array[67]

I hope my explanation is clear and you can assist me with this.

Answer №1

Employ the spread operator in your second-to-last line as shown below

options.push(...newlist)

instead of

options.push(newlist)

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

Could someone assist me in figuring out the reason behind my fetch method sending undefined values?

Looking for some assistance with my fetch implementation issue. I am currently working on integrating stripe into my online grocery store website utilizing a node.js server with express, and ejs for frontend integration. The client-side JavaScript uses a f ...

Code for object creation, inheritance, and initialization

In the code snippet below, a class is defined for managing input events such as mouse, touch, and pointer: // base.js export default () => { return { el: undefined, event: undefined, handler(ev) { console.log('default handler&a ...

The error message "Unable to map props.theTodos" is displayed

I'm facing an error message while compiling: "TypeError: props.theTodos.map is not a function". I've been struggling with this issue for quite some time, but I haven't found a solution yet as I'm using hooks instead of class components. ...

Establishing the folder organization for Express Handlebars

I work with NodeJs, Express, and Handlebars. The main file for my server is named app.js const express = require('express'); const exphbs = require('express-handlebars'); const app = express(); app.engine('handlebars', ex ...

Using computed properties with v-for - a comprehensive guide

In a current project, I have a component in which I am using v-for to iterate over a draggable JS component. <div v-for="(val, index) in rows" :key="index"><draggable></draggable/></div> The property rows in my ...

Display or conceal input element within repeater depending on user choice

I am trying to use jQuery to dynamically create input elements after selecting an option from a dropdown menu. The issue I am facing is that the input element is only displayed in one row of a repeater. Any assistance would be greatly appreciated. Below i ...

All-in-one Angular script and data housed within a single document

Context I want to design a personalized "dashboard" to assist me in staying organized. This dashboard will help me keep track of the issues I am currently handling, tasks I have delegated, emails awaiting response, and more. While I am aware of project ma ...

A guide to combining two properties from a single object within an object using JavaScript

let aboutMark = { firstName: "Mark", lastName: "Miller", height: 1.69, weight: 78, bmiCalculator: function(){ this.markBMI = (this.weight / (this.height * this.height)) return this.markBMI } }; aboutMark.bmiCalculator() console.log(ab ...

How can we pass a function to a child component in Vue 2.0?

I am facing a challenge with passing a function link to the child component in Vue. Although it is functioning correctly, the code appears in HTML format. How can I enhance this? In my Vue instance, I have: app = new Vue({ ... some code data: { ...

what is the best way to display a chosen value in a dropdown menu using jQuery?

How can I display a value from a database in a select option? This code is written in PHP, JSON, AJAX, and JQUERY. $(document).on('click', '.edit_data', function () { var shop_id = $(this).attr("id"); $.ajax({ url: "&l ...

Shading THREE.js Color with Textures

I have added a simple box to my scene, and I am looking to create a shader that will apply a texture to it and add color to this texture. Here is my vertex shader (nothing special about it): <script id="vertexShader" type="x-shader/x-vertex"> ...

The issue with mCustomScrollbar's "scrollTo" function not functioning properly has been detected within a single-page application

Although there are many similar questions out there, I have been unable to find a solution to my particular issue. In my single page application with metro style design, I am facing an issue where the scroll position does not reset back to its original pl ...

Troubleshooting recursive function errors in a Javascript menu

//check out this current jsfiddle for more details: http://jsfiddle.net/0ht35rpb/45/ I'm attempting to create a loop through a JSON navigation tree in order to match the alternative language counterpart when a user navigates to a specific page. //H ...

Can Angular be used to send form data to an external URL?

Let's take a look at an example with some code: <form method="post" action="URL"> <input type="text" name="first name" /> <input type="text" name="last name"/> <input type="submit" value="Submit" name="submit"/> < ...

Limit the selection of 'pickable' attributes following selections in the picking function (TypeScript)

In the codebase I'm working on, I recently added a useful util function: const pick = <T extends object, P extends keyof T, R = Pick<T,P>>( obj: T, keys: P[] ): R => { if (!obj) return {} as R return keys.reduce((acc, key) => { re ...

Executing a mousedown event in Ajax while simultaneously running another JavaScript function using JQuery

One issue I am facing involves a JavaScript method. There is a date slider for months that triggers an AJAX call when the month is changed (mouseup event). Within this AJAX call, there is another JavaScript code ($.blockUI) which seems to interfere with th ...

What is the best way to bring in a variable initialized by an IIFE from a JavaScript file into a TypeScript class?

I'm currently working towards integrating the steelseries.js library (found at https://github.com/HanSolo/SteelSeries-Canvas) into a Grafana plugin built with React. It's quite a complex task, but I'm up for the challenge. Right now, my ma ...

What is causing the search feature to malfunction on the Detail page?

In my project, I have different components for handling shows. The Shows.jsx component is responsible for rendering all the shows, while the ProductDetails component displays information about a single show. Additionally, there is a Search component which ...

A collapsible select list with checkboxes for children items

I am currently developing a website using Vue.js, HTML, and SCSS. I am looking to implement a drop-down functionality similar to the animated example provided in the gif below: https://i.stack.imgur.com/Mia2D.gif The gif demonstrates how the drop-down me ...

How can I add text to an HTML5 SVG similar to using the HTML5 <p> tag?

I am currently working on creating dynamic rectangular boxes and I am facing some difficulties with inserting text into the shapes. The SVG text requires setting x and y coordinates in separate text tags, and doesn't have built-in width and height pro ...