Grouping items by a key in Vue and creating a chart to visualize similarities among those keys

I am working with an object that has the following structure;

{
  SensorA: [
    { id: 122, valueA: 345, "x-axis": 123344 },
    { id: 123, valueA: 125, "x-axis": 123344 },
    { id: 123, valueA: 185, "x-axis": 123344 },
    { id: 121, valueA: 95, "x-axis": 121344 },
    { id: 121, valueA: 125, "x-axis": 123144 }
  ],
  SensorB: [
    { id: 222, valueB: 785, "x-axis": 122344 },
    { id: 223, valueB: 485, "x-axis": 123394 },
    { id: 221, valueB: 432, "x-axis": 123344 }
  ],
  SensorN: [
    { id: 782, valueN: 295, "x-axis": 123344 },
    { id: 786, valueN: 895, "x-axis": 133344 },
    { id: 782, valueN: 755, "x-axis": 122245 },
    { id: 786, valueN: 295, "x-axis": 128844 }
  ]
}

Each array key contains objects with a similar structure. For example, SensorB has objects with a valueB property and so on. I want to create a dynamic card that displays a multiline chart of data from similar sensors. While I can envision how this can be achieved, I need help structuring the code and HTML for it. Can anyone assist me in this matter? Please refer to the following image for an illustration of the desired outcome:

https://i.stack.imgur.com/u02yK.png

javascriptvue.jschart.js

Answer №1

When encountering a similar issue, I initially organized the array into objects as demonstrated in my original question. I then extracted both the keys and values from these objects. By treating each key as an index for its corresponding value, I was able to use a v-for loop to iterate through the keys. Within this loop, I passed the value indexed by that key as a prop to the component being iterated.

<div v-for="(sensor, index) in data.keys"
      :key="sensor.keys"
      class="q-pa-md col-xs-12 col-sm-6 "
    >
      <Chart :sensor="sensor" :arr="data.val[index]"></Chart>
    </div>

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

The word "yargs" will not activate a command within a script

I have a NodeJs script that requires parsing command line arguments. Here is the code I have written: import yargs from "yargs"; import { hideBin } from 'yargs/helpers'; //.... yargs(hideBin(process.argv)).command('--add-item ...

javascriptnode.jscommand-linecommand-line-argumentsyargs

Tips on slowing down the Jquery UIBlock Plugin

Currently, I am implementing a plugin found at http://jquery.malsup.com/block/#overview. However, I am interested in configuring the blockUI feature to only be displayed if an AJAX request takes longer than 1 second. Otherwise, I would prefer for nothing ...

javascriptjquery

What is the best way to show one slot at a time?

As I embarked on the journey of building my unique carousel, I made the strategic decision to utilize slots for this endeavor. I have developed two essential components: a carousel.vue and slide.vue. The carousel.vue component carefully organizes all slid ...

vue.jsvue-component

Having trouble getting two different filters to work properly when filtering data in AngularJs

I have created a plunkr to demonstrate my current situation: The user is required to type a word into the textbox, and upon clicking the button, an angular service retrieves data from a DB based on the input text. The retrieved data is then displayed in a ...

javascriptangularjsangularjs-directivefilteringangularjs-filter

Programmatically link validation rules to form fields

I have implemented validation in a form using VeeValidate with Vue.js. Each input displays an error message related to the specific field where the error occurred. <div class="input-group"> <input type="date" class= ...

javascriptvalidationvue.jsvuejs2

Tips for keeping components mounted despite changes in the path

How can I maintain state in React routes to prevent unmounting when switching between them? In my application, it's crucial to keep the state intact during route changes. When changing routes, the respective components mount and unmount. How can this ...

javascriptreactjsreact-router

Get detailed coverage reports using Istanbul JS, Vue JS, Vue CLI, Cypress end-to-end tests, and Typescript, focusing on specific files for analysis

I have a VueJS app written in Typescript that I am testing with Cypress e2e tests. I wanted to set up coverage reports using Istanbul JS to track how much of my code is covered by the tests. The integration process seemed straightforward based on the docum ...

javascripttypescriptvue.jscypressistanbul

Update the URL path with the selected tab item displayed

Is there a way to show the selected tab item in the URL path? I came across this example using Material UI: import * as React from 'react'; import Tabs from '@mui/material/Tabs'; import Tab from '@mui/material/Tab'; import Typ ...

javascriptreactjsmaterial-ui

The lightbox fails to display in IE when a synchronous ajax request is triggered

I have a piece of code that displays a lightbox with the message 'Please Wait', followed by a synchronous ajax request that removes the lightbox once it's completed. This setup works perfectly in most browsers, but in Internet Explorer, the ...

javascriptjqueryajaxinternet-explorer

Animating a background image to slide in from the bottom to the top using CSS transition

Here is a link to a codepen example: https://codepen.io/jon424/pen/XWzGNLe The current effect in this example involves covering an image with a white square, moving from top to bottom when the "toggle" button is clicked. I am interested in reversing this ...

javascripthtmlcss

Unable to retrieve JSON data in servlet

I am having trouble passing variables through JSON from JSP to a servlet using an ajax call. Despite my efforts, I am receiving null values on the servlet side. Can someone please assist me in identifying where I may have gone wrong or what I might have ov ...

javascriptjavajqueryjsonservlets

Using d3 to showcase pictures sourced from a csv file

Having recently embarked on a journey to learn javascript, d3, and the polymer project, I am facing a challenge that I hope to get some guidance on. After successfully parsing a csv file containing image information and creating an array specifically for ...

javascripthtmlimaged3.js

Introduction to React with Typescript: Greeting the World

I am attempting to create a Hello World React application with Typescript. Below is the code I have written. Method 1 works without any issues, but method 2 throws an error. Method 1 - TypeScriptComponent.tsx import React from 'react' import Re ...

javascriptreactjstypescriptwebpack

Guide to generating a downloadable link using React and Express

In my React app, I have a button which is essentially a div. The Button Component returns this structure with all other elements as props: <button className={"button "+styleButton} onClick={handleClick}> {source && <img src= ...

javascriptnode.jsreactjsexpressdownload

"Strategies for using Selenium in Python to simulate clicks without relying on class, id, or name attributes

I am currently attempting to locate the "X" button and click on it, but I am struggling to find a way to do so. Below is the HTML code for the element: <div style="cursor: pointer; float:right; border-radius: 3px; background-color: red; font-size: ...

javascriptpythonhtmlselenium

Add a class to a button in an Angular btn-group if a specific string is found within an

I am currently working on a project where I have multiple buttons that need to toggle an active class when selected in order to change their color. Below is a snippet of what I have: In the array called 'selected', I have: this.selected = [&ap ...

javascriptangulartypescript

Issue with jQuery in Internet Explorer causing difficulties loading images

I'm experiencing an issue with my website where all the images load on top of each other when the site is first loaded, creating a chaotic mess. The desired functionality is for the images to remain invisible until specific words are clicked, which is ...

javascripthtmlimage

Tips for toggling the visibility of a <div> element using PHP code inside

I'm having trouble with a dropdown list that is supposed to show/hide some divs containing PHP files. However, when I try to toggle the visibility of the divs using the dropdown list, it doesn't seem to work as expected. Can anyone help me figure ...

javascriptphpjqueryhtmlcss

I am puzzled as to why my code in React is rendering twice without any apparent reason

I ran into a strange issue where my console.log("hi") was being displayed twice. I was working on a simple todo-list project and noticed that everything was getting double clicked. After some troubleshooting, it seems like the code is executing any JavaScr ...

javascriptreactjsrender

Getting the parameter route value from Laravel and passing it to Ajax

Need help with returning the parameter of a Laravel route to an AJAX response. Here is the relevant code: public function getPermissions(Request $request) { //$v = request()->route()->parameters('profile'); $v = request()-& ...

javascriptphpajaxlaravel