Guide to displaying nested maps in VueJS

After creating a map of maps structured like this:

{year1:{topic1:[article1,article2]},year2:{topic1:{article3}}}

I attempted to use v-for for iterating through this map but encountered difficulties.

Upon printing the template, I noticed the output looked like this:

{ "Map(1)": { "2016 =>": { "Map(2)": { "Conference =>": [1], "Journal =>": [ 2, 3 ] } } } }

The code snippet used for generating this map is as follows:

            var result = new Map()
            for (var t in temparray){
                var object = this.papers[temparray[t]]
                var year = object.year
                var tt = object.type
                if (result.get(year) ==undefined){
                    var a = new Map()
                    a.set(tt,[temparray[t]])
                    result.set(year, a)
                }
                else{
                    var inner = result.get(year)
                    if (!inner.has(tt)){
                        inner.set(tt,[temparray[t]])
                    }
                    else{
                        inner.get(tt).push(temparray[t])
                        
                    }
                }
            }
            this.selectedPapers = result

The expected outcome for the map should resemble something similar to this:

{"2016":{"Conference":[1]}} 

Answer №1

After some experimentation, I finally cracked the code. In order to iterate through a map successfully, I learned that using [key, value] is the correct approach instead of (key, value). Although there was no clear documentation on this, implementing it resolved the problem at hand.

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

Navigate to a specific hidden div that is initially invisible

Currently, I am working on a web chat application using next.js. The app includes an emoji picker button, which, when clicked, displays a menu of emojis. However, the issue I am facing is that the user has to scroll down in order to see the emoji menu. I a ...

Is Angular's Http Module classified as middleware?

As I delve into the world of middleware, I've encountered a bit of a challenge trying to fully grasp its concept. Currently, I'm exploring the ExpressJS documentation and its explanation of a middleware function: "Middleware functions are functi ...

How to transfer the application version from package.json to a different non-JSON file in Angular and node.js

While developing my Angular application, I encountered a task where I needed to extract the version number from the package.json file and transfer it to a non-json file. The content of my package.json file is as follows: { "name": "my app ...

What is the process for moving an ISO date from one system to

Need help with converting ISO date format? Error: Time value is not valid updateDate = e => { let inputDate = e.target.value const parts = inputDate.split('/') const rearranged = [parts[1], parts[0], parts[2]] const newDate ...

Regain the cursor focus on a text input field once it has been disabled and re-enabled using AngularJS

In my code, I have implemented an input field along with a $watch function that triggers a server request when the scope variable changes. While the server request is being processed, I disable the input field. However, once the request is complete and the ...

Always keep your phone in landscape orientation for optimal website viewing

Currently, I am facing an issue with my website where it functions perfectly on mobile devices in landscape orientation but elements get distorted when viewed in portrait mode. Is there a method to ensure that the website is always displayed in landscape ...

Seeking out the index of each instance of a specific element within an array using Ramda.js techniques

I am currently attempting to locate the index of all occurrences of both Header and Footer within an array. var arr = [ 'data', 'data', 'data', 'data', 'Header', 'data', 'data', 'd ...

Effective state management for numerous instances in Vue 3 using Pinia and Element Plus

I've encountered an issue where default objects sharing the same state are causing binding problems, making it difficult to separate them. Each instance needs its own independent state management. Both parent and child components exchange data and int ...

Guide to transforming a large 1D array into individual key:value pairs in JavaScript

I have successfully created a free-hand drawing sketchpad in threeJS with the ability to draw shapes. My next step involves utilizing simplify-JS to simplify the points in my polygon. One issue I am facing is that I am passing my array as buffer geometry ...

Are you struggling with NodeJS asynchronous callback not achieving success?

Currently, I am working on developing a scraper that utilizes the async.map feature to iterate through an array, perform certain logic, and then map them to different values. async.map($('.listing tr').toArray(), GetLink, function(err, results) ...

Dealing with form validation errors in Laravel 5.4 combined with VueJS

Within the create.vue form, my template structure looks like this: <template> <div> <div v-if="message" class="alert alert-success"> {{ message }} </div> <form @submit.prevent="store" ...

"Looping through each item in a list using Angular

I have a setup for an HTTP request that will return the list of products once all promises are fulfilled. My objective is to initially set the opacity of these products to 0, and then use a forEach loop to add a class that sets their opacity to 1. While ...

Resizing and uploading multiple images with accompanying descriptions

I am in need of a solution for uploading multiple images along with descriptions. Users will be uploading 1-10 large-sized images from cameras, so it would be ideal if the images could be resized before the upload. My requirements are: Compatibility wit ...

Switching background images with Javascript through hovering

I am currently working on implementing a background changer feature from removed after edits into my personal blog, which is only stored on my local computer and not uploaded to the internet. However, I am unsure of what JavaScript code I need to achieve t ...

Having trouble installing npm packages while integrating VueJS with Laravel framework?

Although this question has been asked before, I believe my issue is unique compared to the problems discussed in previous questions. Here is the output generated by the npm install command: https://i.sstatic.net/bzkVD.png Furthermore, here is the conten ...

What happens to the page layout when a user adjusts the window size?

Is there a way to ensure that a div remains at 40% of the full screen width, regardless of window size changes? I am looking for a JavaScript or JQuery code that can lock the setting of the div to always be 40% of the full screen size. <div style="wi ...

Determine if an Image is Chosen upon Click with Javascript

I am currently working on a wysiwyg editor and I'm facing an issue where I need to determine if a user has clicked on an image within the selection range. Is there a method to detect this without attaching event handlers directly to the image itself? ...

What is the process for activating and deactivating the scroll trigger within Material UI's useScrollTrigger module?

I'm currently working on setting up a survey page with Material UI in React. My goal is to have the survey questions appear when the user scrolls over them and disappear when they scroll out of view, similar to the behavior on this page. After some r ...

Passing identical props to multiple children in React

When working with my React App, I decided to implement a star rating system for the posts fetched from an API and displayed on the main page. To achieve this, I created a function that utilizes a Rate component to rate each post using the ratePost action. ...

Issue with updating Three.js Mesh position

I have been working on mapping lat/long data to a sphere. I am successfully generating vectors with different positions and setting the cube mesh position accordingly. However, when I merge and display the cubes, it seems like there is only one cube show ...