Add a parameter within a loop using JavaScript

I am currently working on a function with a parameter called menu.

removeChildCheck:function(menu){
    let removeArrayValues = [];
       for(var i=0; i < this.checkbox.menu.length; i++){
           removeArrayValues.push(this.checkbox.menu[i].value);
       }
       this.user.permissions = this.user.permissions.filter((i) => !removeArrayValues.includes(i));
 },

However, when I invoke it like this removeChildCheck('dashboard'), I encounter an error where the length is undefined.

Does anyone know how to properly append the param and iterate over it? Thank you in advance. TIA

javascriptvue.jsvuejs2

Answer №1

Are you looking to achieve this:

this.checkbox[menu]

This means accessing the property of checkbox which has its name stored in the variable menu. Remember that:

this.checkbox.dashboard

is the same as

this.checkbox['dashboard']

and

menu = 'dashboard'
this.checkbox[menu]

Answer №2

audiodude suggests using array syntax, such as this.checkbox[menu].length

removeChildCheck:function(menu){
    let removeArrayValues = [];
       for(var i=0; i < this.checkbox[menu].length; i++){
           removeArrayValues.push(this.checkbox[menu][i].value);
       }
       this.user.permissions = this.user.permissions.filter((i) => !removeArrayValues.includes(i));
 },

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

Comparing textboxes on separate web pages to validate forms using AJAX on the server side

I am exploring the creation of a straightforward server-side form validation system using ajax. The objective is to verify if the data inputted by the user matches the data stored on another page. For instance, if a user enters the number 10 in a textbox ...

javascriptjqueryajax

Building a customized version of CKEditor5 in a VUE framework

I put together my own customized CKEditor5 starting from the classic edition. git clone -b stable https://github.com/my/forked/repo cd ckeditor5 npm install npm run build Within my VUE2 project's main.js import 'path/to/ckeditor5/build/editor. ...

vue.jsvuejs2ckeditorckeditor5

Angularfire allows for easy and efficient updating of fields

Currently, I am working on creating a basic lateness tracker using AngularFire. So far, I have successfully added staff members to the miniApp and set the initial late minutes to a value of 0. My challenge lies in updating these values. Ideally, when a us ...

javascriptangularjsangularfire

Guide on Redirecting to a Welcome Page with a Passed Username Prop using Inertia.js in Laravel 9

I am currently developing an Application using Laravel and vue.js with Inertia. In this application, I have implemented a login page where users can enter their credentials. Upon successful authentication, the user should be redirected to the "Welcome.vue" ...

laravelvue.jsvuejs3laravel-9inertiajs

Utilizing Sinon.js for inline callbacks upon successful execution

Currently, I am utilizing QUnit, Sinon.js (specifically fakeServer), and jQuery (for AJAX) to capture and test AJAX calls within my program. One issue that I am encountering pertains to the inconsistency where inline-function calls are not being executed. ...

javascriptjqueryajaxcallbacksinon

Unfortunately, the header and footer are not lining up correctly with the main body on our mobile site

I've been tasked with creating a fully responsive website, but I'm encountering difficulties with the mobile design. Specifically, when I switch to mobile dimensions like an iPhone 12, the header and footer don't line up properly with the ma ...

javascripthtmlcss

Capturing content from an HTML node and integrating it into VueJS data

<tasks> @foreach ($task as $tasks) <task>{{ $task->name }} [{{ $task->completed }}]</task> @endforeach </tasks> This snippet shows how I display a list of tasks from the database. Here is my Vue component setu ...

phplaravelvue.js

How to assign attributes to all child elements in Angular?

I have a unique component in Angular that I utilize throughout my app. It's a button component which I use by calling <app-delete-btn></app-delete-btn> wherever needed. I tried to set the tabindex="1" attribute for my component ...

javascripthtmlcssangulartypescript

What causes a 404 error when using a router in Express/node.js?

I've recently created an Express app and set up a custom route (/configuration). However, when I try to access http://localhost:3000/configuration, I keep getting a 404 Not Found error from the server. I've reviewed the code but can't seem t ...

javascriptnode.jsexpressrouteshttp-status-code-404

Sending data from local storage to ajax call

Below is the code snippet in question: $.ajax({ url: localStorage.getItem("isntagram link"), // url: "https://api.instagram.com/v1/users/self/feed?access_token=233291163.8a612cd.c49f77de073746e9a2f53116b720302e", met ...

javascriptajaxlocal-storage

Exploring the Integration of Google Drive API with a Vue Application

Have you checked out the browser quickstart guide for Google API? https://developers.google.com/drive/api/v3/quickstart/js The sample code includes the following tag: <script async defer src="https://apis.google.com/js/api.js" onload=& ...

vue.jsgoogle-drive-api

Vue components failing to reflect code changes and update accordingly

Initially, the component functions properly, but subsequent changes require me to restart the server in order to see any updates. ...

javascriptlaravelvue.jswebvue-component

Google Chrome is unable to process Jquery JSON .each() function

My website has a simple chat application that is functioning well. It uses ajax to request data in this manner: $.ajax({ url: "fetch/"+CHAT_SESSION_ID+"/"+LAST_MESSAGE_ID, dataType: "json", cache: false, success: function(data) { if (data.session_ac ...

javascriptjqueryajaxjsongoogle-chrome

What is the process for generating a fresh PSBT transaction using bitcoinjs-lib?

This is the code I've been working on import * as bitcoin from 'bitcoinjs-lib' const NETWORK = bitcoin.networks.regtest; const psbt = new bitcoin.Psbt({ network: NETWORK }); function p2shAddress(node: bitcoin.ECPairInterface): string { c ...

javascripttypescriptbitcoin

Angular parent scope does not reflect changes when a directive updates the shared scope variable

My directive is designed to validate and modify a specific binded value before triggering the button action. However, I am facing an issue where any updates made to the directive value are not being reflected in the parent scope. Even though I have used (= ...

javascriptangularjs

Vue.js data does not exhibit reactivity

I am encountering an issue with a non-reactive data object nested inside another object in my Vue.js template. Here is the code snippet: <template> <div> <b-container class="bg-white text-center scrollBehavior" > ...

javascriptvue.js

What is the proper method for activating the lights in a traffic light sequence?

I've been working on creating a traffic light sequence where each time the "change lights" button is pressed, the light is supposed to change. However, I'm facing an issue where the code only displays the red light and doesn't switch to ambe ...

javascript

Encountering an error when attempting to upload a file to S3 using JS Vue

I'm attempting to upload a file to my S3 bucket using the aws-s3 library, but I am encountering this error in the console: https://i.stack.imgur.com/lk47U.png Here is the code for the component: <template> <input type="file" @ch ...

javascriptamazon-web-servicesvue.jsamazon-s3

react-widgets: deciding on the return value for the onSearch function in Multiselect

I'm currently experimenting with react-widgets and utilizing the onSearch function in conjunction with the Multiselect component. Even though I can see that onSearch is being called with the searchTerm, I am unable to incorporate the response into the ...

javascriptreactjs

Easily modify and manage state on-the-fly using TextFields

Is the title conveying my intentions clearly? If not, please let me know. Essentially, I am looking to create a component that generates a form based on a JSON file. For example, if someone clicks on "light" in the navbar, I want the form to display fields ...

javascriptreactjsmaterial-ui