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

Combining and organizing Javascript files for efficient loading and reusable code functionality

I've been tasked with cleaning up a project that contains around 45-50 separate .js javascript files. I'm trying to figure out the most effective way to reduce their loading size. Should I combine all the files into one using npm or gulp? Or shou ...

javascriptnpmgulpbundle

In the ajax call, an empty JSON array object is sent as the data

Utilizing JSON data as a parameter for an ajax call: var startDate = dateFormatForSave($("#start_date").val().trim()); var arrayOfStudentsInfo = []; var table = $("#selected_students"); table.find('tr').each(function(i, el) { var rowId = $( ...

javascriptjqueryajax

concealed highcharts data labels

I attempted to create a bar chart using Highcharts, and initially it worked fine. However, I encountered an issue when displaying multiple indicators - the datalabels for certain data points are hidden. For example, the datalabel for "provinsi aceh" is not ...

javascripthighcharts

No matter the way I input the URL in the AJAX call, the response always comes back as successful

I ran into an issue with my ajax request. It was supposed to be a GET request that returned some data, but no matter how I configured the URL, it always gave a success response even when it didn't actually succeed. var id = 5; $.ajax({ type: ...

javascriptnode.jsajaxexpress

Looking to integrate the date, month, and year selection tags into the inline format

The Edit User Profile page includes a Birthday field, which is currently displayed vertically. I am looking to change the layout so that the Birthday field appears horizontally. Here is the code I am using: Within visitors/edit.html.erb, <%= simple_f ...

javascripthtmlcssruby-on-rails-4datepicker

Incorporate a fresh element into an object after its initial creation

Hello, I am looking to create an object in JavaScript that includes an array-object field called "Cities." Within each city entry, there should be information such as the city's name, ID, key, and a District array object containing town data for that ...

javascriptarraysreactjstypescriptobject

Preview multiple images while uploading with V-for in Vue JS

Having trouble displaying images in a loop using :ref I've implemented FileReader() to read the field. Vue Component <div v-for="(image, index) in imgFile" :key="index"> <img :ref="'image'+parseInt( index )"> {{image.name}} ...

javascriptvue.js

Issue encountered while attempting to send an HTML file using express.js

I have been trying to display an HTML file using Express.js with a static __dirname, but the HTML content does not show up after calling localhost/ var express = require('express'); var web = express(); ...

javascriptjquerynode.jsexpress

An error occurs when calling useSWR in a function that is neither a React function component nor a custom React Hook function

When using useSWR to fetch data from an endpoint, I encountered the following error (I only want to fetch data onclick) "useSWR is called in function `fetchUsers` that is neither a React function component nor a custom React Hook function" Error ...

javascriptreactjsreact-hooksmaterial-uiswr

JavaScript API for Outlook appointment object

Is there a way to change the appointment busy status "show as" to out of office using JavaScript in an Outlook web add-in? Also, how can I alter the value of all day event to true (tick it) using JavaScript in an Outlook web add-in? Any insights would be ...

javascriptnode.jsoutlookoffice365office-js

How can state be shared between sibling components in React?

As someone who is relatively new to React, I am seeking guidance on the proper method of passing states between components. While I did come across a similar inquiry on Stack Overflow, I would appreciate if someone could provide a specific solution for my ...

javascriptreactjsmeteor

Using a conditional statement in JavaScript, create a mapping between the values in an array and string

I have a dropdown list that I want to populate with options. The functionality of the onchange event is handled by the following code snippet: const handleChange = (event) => { onFilterChange(filterName, event.target.value); } The value of event.ta ...

javascriptarraysreactjsif-statementmaterial-ui

jsTree unable to locate node using the provided ID

Implementing the jsTree on the webpage is not a problem for me. I have experimented with numerous suggestions from different sources. $('#myTree').jstree({ .... }) .on('loaded.jstree', function (e, dta) { var t = $('#myTree&a ...

javascriptjqueryjstree

Prevent additional clicks on the image

Currently, I am dealing with a situation where I have a list containing a jQuery handler for mouse clicks. The dilemma is that I need to insert an image into the list, but I want clicking on the image to trigger a different function than clicking elsewhere ...

javascriptjqueryhtml-lists

Dynamically assigning a name to a variable through code

Is there a quicker way to complete these 100 tasks? variable_1 = 1; variable_2 = 2; variable_3 = 3; ... variable_100 = 100; I attempted to use the following code: for(var i = 1; i <= 100; i++) { variable_ + i = i; } However, I encountered an e ...

javascript

Using Selenium with Python to interact with a dynamically generated object that does not have an identifying id or name

Whenever a Right click is performed, an options popup/screen will appear with dynamic content/element. Here is the Options Popup: https://i.stack.imgur.com/TfxpC.png This dynamic content/element will disappear as soon as the mouse is clicked elsewhere o ...

javascriptpythonseleniumselenium-webdriverweb-inspector

Tips for implementing both an onChange and onSubmit event for a MUI TextField

I'm currently working with React and MUI and have created a form like the following: const handleUserInput = (event) => { set_user_input(event) } const handleSubmitForm = () => { if (user_input == 'help'){ ...

javascripthtmlreactjsformsmaterial-ui

Dropdown in Angular JS is displaying incorrect values in the options

I am a newcomer to AngularJS and encountering an issue with populating a dropdown. Within a foreach loop of data retrieved from the server, I have created an array of user data: $scope.Users.push( { userid: ...

javascriptjqueryangularjs

Troubleshooting the Gutter Problem in jQuery Isotope and Masonry

Currently, I am utilizing the Isotope jQuery plugin. While it is a fantastic tool, I am encountering a minor issue with aligning items in masonry mode. The width of my container is 960px, and I aim to have 4 items perfectly aligned as if they were adhering ...

javascriptjquerycssjquery-masonry

What is the process of utilizing marked plugins within a Vue3 project?

I attempted to integrate the marked plugin into my Vue.js applications. After installing [email protected], I did not encounter any issues during compilation. However, when I viewed the contents in the browser, nothing appeared. My Vue project was built u ...

javascriptvue.jsvuejs3javascript-marked