What are some common applications of the QMap datatype in QML?

Let's say I have a simple QMap declared and initialized with values inside C++ and properly exposed to QML.

C++

QMap<QString, QMap<QString, QString>> airflow_buttons_;
//simple getter
[[nodiscard]] QMap<QString, QMap<QString, QString>> airflow_buttons() const;

QML

console.log(ClimateModel.airflow_buttons);

the output displayed is:

(qrc:/Climate/AirflowButtons.qml:24)  - QVariant(QMap<QString,QMap<QString,QString>>, QMap(("left", QMap(("top_air", "NOT_ACTIVE")))))

The output is in the form of a QVariant. I am unsure how to convert it to a Map with the desired values.

I aim to utilize it as a straightforward JavaScript Map.

console.log(ClimateModel.airflow_buttons["left"]["top_air"]); //Should display "NOT_ACTIVE" 
console.log(ClimateModel.airflow_buttons["left"]);            //Should show the Map contents

The current error message indicates 

[debug] expression for onCompleted (qrc:/Climate/AirflowButtons.qml:24)  - undefined

To illustrate what I intend to achieve in plain JavaScript:

var myMap = {x: "Test", y: "Test 2"};
myMap["z"] = "Test 3";
console.log(myMap["z"]);                 //displays "Test 3"
console.log(JSON.stringify(myMap["z"])); //displays the map contents

How can I accomplish this seemingly simple task?

javascriptc++qtqml

Answer №1

It is highly recommended to utilize a QVariantMap throughout your code:

QVariantMap airflow_buttons = {
    {"left", QVariantMap{
         {"top_air", "NOT ACTIVE"}}}
};

By the way, you can achieve the same in QML with the following syntax:

console.log(ClimateModel.airflow_buttons.left.top_air)

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

What is the reason behind using "non-type parameter" instead of "value parameter" in template nomenclature?

What is the reasoning behind naming non-type template parameters as “non-type” rather than “value” parameters? I find it misleading to refer to them in this way, especially when considering templates as parameters to templates that are not types. A ...

c++templates

Discovering the most recent Node.js version: A step-by-step guide

Is it possible to check the latest available Nodejs version using npm? While node -v allows us to see the current version, I am curious if there is a way to access the most recent version through JavaScript. For example, process.version can be used to vi ...

javascriptnode.jsnpm

Using jQuery to enhance the functionality of the drop-down select feature

I am facing an issue with my index file code. When I select something from the drop-down menu, I expect to see a related dropdown appear. Although I have added this code to my file, I am unable to get the drop down to show after selecting the main type. ...

javascripthtmljquerycss

Retrieve an item from an array based on the unique ID value of the button that was clicked using

I am working with a phones array that is populated with JSON data: var phones = [ { "age": 0, "id": "motorola-xoom-with-wi-fi", "imageUrl": "img/phones/motorola-xoom-w ...

javascriptjqueryjquery-events

Implementing multiple modules within a shared parent route in Angular

Currently, I am seeking a method to load multiple modules under the same path in Angular. Let's say I have three modules: AModule, BModule, and CModule, each with its own RouterModule.forChild call. My goal is to combine these modules under the route ...

javascriptangularmodulerouter

How come the "colspan" attribute is not functioning properly in my table?

Check out the simple table form I created on jsfiddle. Here is the code snippet: <table> <tr> <td class="field_label">name</td> <td>*</td> <td> <input type="text"> ...

javascriptjqueryhtml

What is the best way to save a beloved pet for a user who is signed in?

Is there a way to store a favorite pet for a logged-in user using React and Express? I am currently retrieving pets from an API and using PostgreSQL as the database. const favPetDetails = { id, name, media, breeds, location, dista ...

javascriptreactjspostgresqlexpress

Display the current page as it appears in AngularJS

I attempted to utilize the ngPrint directive from https://github.com/gilf/ngPrint for printing purposes. However, when I print the page, the design collapses entirely. Is there a solution to maintain the page layout when printing? Please note that Angula ...

javascriptangularjsangular-material

Implementing a node.js application deployment with pm2 to ensure zero downtime

While there are countless tutorials on developing chat applications using socket.io and node.js, the event-driven advantage of Node is undeniable for building chat apps. However, a recent thought crossed my mind - how can I ensure the sustainability of my ...

javascriptnode.jsexpresssocket.iopm2

Retrieve data from a REST API in a dynamic manner without manually specifying the table structure in the HTML code

I am looking to retrieve JSON data via a post request from a REST API: http://localhost/post1 param1='1' The response will look like this: { "json_table": [ { "date": 123, "test": "hello2" }, { "date": 19, ...

javascriptjqueryajaxdatatables

I encountered an issue while attempting to manipulate/retrieve the JSON value using REGEX, resulting in an undefined return

I am attempting to retrieve the currency value from a JSON file and if it is USD, then I want to change it to AUD. When trying to find the currency attribute in the JSON file, it returned 'undefined' as shown below: Code: var datastring = JSON. ...

javascriptjsonregex

Looking for a pattern that combines Browserify and Angular?

Currently, I am embarking on a project using angular and browserify for the first time. I am seeking advice on how to properly utilize the require function with browserify. There are multiple ways to import files, but so far, I have experimented with the ...

javascriptangularjsbrowserify

The start screen fails to display when clicking the restart button

I am struggling to get the restart button to display the start screen again. Even though I have called the restart function within the clearColors function, which should show the start screen, it hasn't been effective so far. Initially, in the fadeOut ...

javascripthtmlcssfunctionhtml-table

Steps for storing div content (image) on server

Currently in the process of developing a web application that allows users to crop images. The goal is for users to have the ability to email the URL so others can view the cropped image, ensuring that the URL remains active indefinitely by storing every c ...

javascriptphphtml

Dealing with error management in Transfer-Encoding chunked HTTP requests using express and axios

My current challenge involves fetching a large amount of data from a database in JavaScript using streaming to avoid loading all the data into memory at once. I am utilizing express as my server and a nodeJS client that retrieves the data using Axios. Whil ...

javascriptexpresserror-handlingaxioschunked-encoding

JavaScript - Clear the localStorage when closing the final tab of a website

Currently, I am working with AngularJS and utilizing $window.localStorage to store the username of a logged-in user. Since localStorage needs to be explicitly deleted, I have implemented an event listener for $(window).on('unload', function(){}) ...

javascriptjqueryangularjshtmltabs

Setting up Quill in a Nuxt project (a VUE component)

I'm struggling to remove the toolbar in Quill despite my efforts. This is the HTML snippet I am working with: <template> <quill v-model="content" :config="config"></quill> </template Here's what I have inside the scri ...

javascriptvue.jsnuxt.jsquill

Tips for updating a specific portion of a component in react.js

import React,{useEffect} from 'react'; import CloudTables from '@cloudtables/react'; import { useState } from 'react'; function DataGridTable ({ input1Value, input2Value }) { return ( <div className="con ...

javascriptreactjsdatatabledatagridjavascript-objects

Making a REST call with values containing an apostrophe

Currently, I am utilizing REST and ajax to retrieve data from SharePoint using the URL below: https:xxxxxxxx/_vti_bin/ListData.svc/RMSD_Tasks?$orderby=IssueValue asc,StatusValue desc&$filter="+dropValue+" eq '"+secondFilterVal+"'&groupby ...

javascriptajaxrestsharepoint-2013

The onScroll event is failing to trigger when scrolling to a particular div on Next.js

Is there a way to fetch data when a specific div comes into view on a SSR page in Next.js? I attempted using the onScroll event on the div, but it doesn't seem to be triggering. Any suggestions? function handleScroll() { console.log("scrolled ...

javascriptnext.jsscroll