The variable is currently undefined because it has an array assigned to it

Upon selecting multiple checkboxes for variants, I am retrieving checked data using the following method:

get selectedIdsFromViolCategoriesFormArray(): string[] {
    return this.violCategories
      .filter((cat, catIdx) => this.violCategoriesFormArr.controls.some((control, controlIdx) => catIdx === controlIdx && control.value))
      .map(cat => cat.value);     
  }

When I log the output:

console.log('arrViol: '+this.selectedIdsFromViolCategoriesFormArray);

arrViol: Unauthorized access to information, Getting confidential information by supposedly trustworthy person (phishing)

Next, I attempt to assign it to a variable:

this.violation = this.selectedIdsFromViolCategoriesFormArray;

However, I encounter an error:

Type 'string[]' is not assignable to type 'string'

This is my variable. I tried also violation: string;

violation = '';

I also tried:

this.violation = this.selectedIdsFromViolCategoriesFormArray.toString();

and it "works" with a good console.log output, but now..

I want to assign this.violation to my interface (violation?: any; (I just tried any but nothing))

 answers: Answers = {

    id: undefined,
    name: '',
    date: '',
    time: '',
    violation: this.violation,
    description: '',
    numofpeople: 0,

  };

But despite the correct output in console.log, this.violation is

undefined

when I try to do

console.log(this.answers.violation)

I do not want to input an array output into my MySql. I simply want a string separated by commas.

Answer №1

Here is the solution you have been searching for:

this.violation = this.violCategoriesFormArraySelectedIds.join(', ')

By executing this code, you can transform an array of strings into a single string where the elements are separated by commas.

Next, make sure to assign it to this.answers:

this.answers = {
    id: undefined,
    name: '',
    date: '',
    time: '',
    violation: this.violation,
    description: '',
    numofpeople: 0,
  };

console.log(this.answers)

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

Having trouble getting a new input box to be added when clicking with AngularJS?

I am facing an issue with adding dynamic form fields to the database using PHP. I have utilized angular for this purpose, but only the last form field is getting inserted into the database. To address this, I attempted using arrays and loops to increment a ...

Retrieve an array of items from the Firebase snapshot

Currently in the process of retrieving items from my Firebase database, I am utilizing a snapshot that is generated when the page loads. I have collected the values of each object in an array and I am now attempting to add an item from each object into a s ...

Issue with Angular 8: click event is not triggering when using ngFor directive to iterate through arrays of objects

Update: The original post has been modified to omit implementation details and complexity. I am facing an issue with an ngFor loop that invokes a method on a service. The method returns an array which is then iterated over by the for loop. The click even ...

What steps can be taken to ensure web resources such as scripts, images, etc are loaded from the correct location when implementing CORS support in a web application

In my local IIS, I have two asp.net mvc applications running on different ports. One is "App1" on port 1066 and the other is "App2" on port 1067. My requirement is for App2 to post data to an endpoint in App1 for validation. If the data is valid, App1 sho ...

Transferring information from the backend (powered by nodejs) to the frontend using JavaScript

I have data stored in my MongoDB database and I am retrieving this data from the DB to save it to an array. When a button is clicked on the webpage, I want to send this data to my JavaScript file and use the DOM to display it on the page. On page load, I ...

Click once to expand all rows in the table with ease

I have successfully created a basic table using HTML. The table includes nested elements that are designed to open individually when clicked on the assigned toggle. Essentially, clicking on a '+' icon should reveal a sub-menu, and clicking on a & ...

js The correct value is not being set to the div's style.top

function gamestart(){ var gr; var gr = true; console.log(gr==true); if(gr == true){ console.log("we have activated pointer key detection dear Mr.ketsebaot") document.onkeydown = checkk; } } function checkk(e){ cons ...

When clicking in JavaScript, there are two parts to the function, however only one part will work at any given time

I am currently working with two server-side PHP scripts: 1. /addit.php - which generates a PDF file on the server based on the provided ID 2. /viewit.php - which allows the PDF file to be downloaded to the browser window. While both of these scripts are ...

Transforming query language from jQuery to Pure JavaScript

I have the following jQuery code that I am attempting to remove and convert into standard JavaScript: $('.switch').click(()=>{ $([".light [class*='-light']", ".dark [class*='-dark']"]).each((i,ele)=& ...

Error: inability to execute performanceMeasurement.startMeasurement due to its absence in the function definition

An error occurred when attempting to login using @azure/msal-react in Next 13. Upon checking the error log, it was found that the error originated from the core library @azure/msal-react. Even after trying with a login popup, the error persisted. In my co ...

Utilizing an Ajax request for a polling system

I am in need of adding a polling mechanism to call a web service from my webpage. To achieve this, I am attempting to utilize an ajax call within a javascript page. However, I am fairly new to both ajax and javascript. Below is the code snippet that I have ...

Displaying the ngFor data in the HTML section

Struggling with passing an array from poll-vote.component.ts to poll-vote.component.html. The data involves radio buttons and I'm using ngFor loop with index, but it's not working as expected: Here is my poll-vote.component.ts code: import { Com ...

Tap, swipe the inner contents of a <div> element without being inside it

(Make sure to check out the image below) I'm facing an issue with a <div> on my website. It's not taking up the full width of the page, and the scrolling functionality within the <body> is not working as expected. I just want the cont ...

Using ts-loader with Webpack 2 will result in compatibility issues

Lately, I've been working on setting up a basic Angular 2 (TypeScript) application with Webpack 2 for bundling. However, I'm encountering numerous errors when using ts-loader to process TypeScript (.ts) files. It seems like ts-loader is not excl ...

Unable to load class; unsure of origin for class labeled as 'cached'

Working on an Angular 10 project in visual studio code, I've encountered a strange issue. In the /app/_model/ folder, I have classes 'a', 'b', and 'c'. When running the application in MS Edge, I noticed that only classes ...

Is there a JavaScript function available to remove comments from previously commented HTML code?

<div id="div1">bar</div> JQuery function addComment(element){ element.wrap(function() { return '<!--' + this.outerHTML + '"-->'; }); } addComment($('#div1')); Looking for assistance in unc ...

The module 'AppModule' is encountering an unexpected value of '[object Object]' during import. To resolve this issue, please include a @NgModule annotation

Currently, I am facing an error when trying to import the 'PopupModule' Module from 'ng2-opd-popup' into my application. Despite successful compilation using Webpack, the browser throws the following error message and fails to load: Un ...

Preventing Multiple Form Resubmissions in PHP

I have multiple forms that require navigation from the initial form to the final form. Each form includes both 'NEXT' and 'BACK' buttons for moving forward and backward in the process. I am looking for a way to prevent the confirmation ...

Basic HTML code that displays either one or two columns based on the width of the screen

My monitoring website displays dynamic rrd graphs in png format with fixed dimensions. I am looking to adjust the layout based on browser window size - showing the graphs in 1 column if the width is below a certain threshold, and in 2 columns if it exceed ...

Unlocking Global Opportunities with Stencil for Internationalization

Hi there, I've been attempting to implement Internationalization in my stencil project but unfortunately, it's not working as expected. I'm not sure what's causing the issue, and all I'm seeing is a 404 error. I followed these arti ...