Tips for inserting a variable into an attribute value when creating it using TypeScript

this.listvalue;
list.forEach((v: any) => {

  v.data.forEach((v2: any) => {


    this.searchlist.push({
      header: v.header,
      value: v2.value_0

    });
  });
});

Is there a way to replace v2.value_0 with v2.this.listvalue? I've tried v2.valueof(this.listvalue) but it doesn't work. I need to access this.listvalue within v2.

How can I achieve this? What is the correct syntax for this situation? The complete code snippet is shown below:

export class Md2Component {
  @Input() list: any;
  @Input() listvalue: any;

  public searchlist;
  public placeholder: String = "Search the JSON";
  public switch: boolean = true;
  public switch5: boolean = true;
  public searchlistresult: any
  public data: string;
  public header1: String;
  public resultant_list: any;
  public lastone: user[] = [];
  @Output() _onSelect = new EventEmitter<any>();
  public anyinstance: any
  public user2: user

  s = '';
  public index;

  constructor() {

  }
  ngOnInit() {
    this.data = this.listvalue;
    this.createSearchList(this.list);
    this.latest(this.searchlist);

  }
  private createSearchList(list: any) {
    this.searchlist = [];
    this.listvalue;
    list.forEach((v: any) => {
      v.data.forEach((v2: any) => {
        this.searchlist.push({
          header: v.header,
          value: v2.value_0

        });
      });
    });



  }
  search1(s) {
    this.search(s);
    if (this.switch != true) {
      this.latest(this.searchlistresult)
    }
  }

  search(s) {
    this.switch = false;

    this.searchlistresult = _.filter(this.searchlist, (o: any) => {
      if (s) {

        return _.startsWith(_.lowerCase(o.value), _.lowerCase(s));
      }
      this.switch = true;
      return true;
    });
  }
  latest(list: any) {

    const arr = list;

    const keys = [];

    for (let i of arr) {
      if (!keys.includes(i.header)) keys.push(i.header);
    }

    const result = keys
      .map(k => Object.assign({header: k}, {
        data: arr.filter(x => x.header === k)
          .map(y => Object.assign({}, {value: y.value}))
      }));
    this.anyinstance = result;



  }
  generateArray(obj) {
    return Object.keys(obj).map((key) => {return obj[key]});
  }
  onSelect(header: any, value: any) {
    {
      console.log(header);
      console.log(value);
      this.s = value;
      this.user2 = {
        header: header,
        value: value
      }
      this.lastone.push({
        'header': header,
        'value': value,
      }
      );
      this.switch = true;
      this._onSelect.emit(this.user2);
    }
  }
}

Answer №1

It has been mentioned that this.listvalue is defined as an @Input(), suggesting that it already holds a value.

UPDATE: A potential solution could involve passing listvalue as a parameter to the function. By doing so, you can avoid issues related to the global scope of listvalue.

// Adjusting scope to include listvalue parameter and eliminate use of 'this' accessor.
private adjustSearchList(list: any, listvalue: any) {
    this.searchlist = [];

    list.forEach((item: any) => { 
        item.data.forEach((innerItem: any) => {

            this.searchlist.push({ 
                header: item.header,
                value: listvalue
            });
        }); 
    }); 
}

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

How can CakePhp's $ajax->link be used to manipulate the result on the complete action?

Recently, I've started working with cakePhp to handle ajax requests using prototype. While my controller is returning the correct value, I'm struggling to figure out how to properly handle it when it comes back looking like this: <?php echo ...

Align Angular Material 2 Card Header Buttons to the Right

I'm currently using Angular Material 2 and I'm trying to add icon buttons to the card header. How can I align these buttons to the right side? Here is what I'm aiming for: https://i.sstatic.net/miqZn.png Current layout: https://i.sstatic.n ...

Setting the height of a rich HTML editor component can be achieved in a few simple

Seeking guidance regarding adjusting the height of the editing area while using Quill, the rich html editor in my angular component. I am currently utilizing angular-7, bootstrap, and font-awesome, all at their latest versions. Despite thorough research, ...

The compatibility issue between Bootstrap and Angular 2 is causing some challenges

Hey there, I recently enrolled in an Angular 2 course on udemy and everything was running smoothly until I encountered an issue while trying to install bootstrap. I followed the installation steps diligently, but whenever I attempt to add any bootstrap el ...

What is the best way to assign an HTML string to the DOM and connect it with an object?

In my angular HTML component template, I have the following markup: <div *ngIf="htmlTemplate && jsonObj" [innerHTML]="htmlTemplate"></div> The jsonObj variable is retrieved from an endpoint and looks like this: { fi ...

Remove the content located beside an input element

Seeking assistance for a straightforward query: Snippet of code: <span> <input id="elemento_20_1" name="elemento_20_1" class="elemento text" size="2" maxlength="2" value="" type="text"> / <label for="elemento_20_1">DD</label> < ...

Can $event be transferred from cshtml to Vue.component?

I am facing an issue when trying to pass an event into my Vue component. No matter what method I try, I keep getting a "TypeError: Cannot read property 'preventDefault' of undefined" error. Here is the code snippet for my Vue component: Vue.com ...

Mastering the Art of Tallying Select Choices in Protractor

Experiencing an issue with counting options in the select attribute during my test. Here is the code snippet: it('should verify the number of options', function()) { expect(element(by.id('sorting_options')).all(by.tagName('optio ...

Requires a minimum of two page refreshes to successfully load

Our website is currently hosted on Firebase. However, there seems to be an issue as we have to refresh the website at least twice in order for it to load when visiting www.website.com. Update: We are unsure of what could be causing this problem. W ...

Excessive whitespace appearing on the right and bottom edges of the Angular application

I'm fairly new to web development, so this may be a silly question, but I really could use some help. I've created my first Angular app and noticed that there is a lot of white space on the right side of the landing page, as well as at the bottom ...

Grunt: Can you explain the concept of recursive templates?

Hey there, I'm new to using Grunt and I've run into a puzzling issue with recursive templates. Let me provide you with a concrete and straightforward example: var path = require('path'); module.exports = function(grunt) { grunt.init ...

Exporting canvas as JSON and importing JSON back into canvas

Is there a way to prompt file explorer to open and allow me to select a save location for the JSON file of my canvas when I click the save button? Additionally, how can I load the canvas with the JSON file using the load button? Any guidance on getting s ...

The Node-Slack Web API feature chat.delete consistently returns a "channel_not_found" error for any channel, despite the fact that the

I've been experimenting with creating a basic chat bot using the slack-node web API and botkit. However, I've encountered an issue while trying to utilize the chat.delete feature. Despite successfully listing all channels along with their IDs and ...

Angular 7 and Webpack 4 combine to create a secure environment for CSS encapsulation

I find myself in a challenging situation where I have a hybrid environment consisting of both Angular 1.x and Angular 7 routes. The Angular 1.x routes rely on the older version of Bootstrap (3), while the Angular 7 routes are supposed to utilize Bootstrap ...

I want to remove an object from my Django Rest Framework (DRF) database using Angular 13

After receiving the id that needs to be deleted, I noticed that the last line of code in service.ts for the delete method is not being executed. The files and code snippets I utilized are: COMPONENT.HTML <li *ngFor="let source of sources$ | async ...

Testing Angular HTTP error handlers: A comprehensive guide

Below, you will find an example of code snippet: this.paymentTypesService.updatePaymentTypesOrder('cashout', newOrder).subscribe(() => { this.notificationsService.success( 'Success!', `Order change saved successfully`, ...

What causes me to receive an array JSON response every time I make a call to a method in the Web API

When I call a method in Postman, I receive an array that includes my JSON data as shown below: [ { "spark_version": "7.6.x-scala2.12" } ] The API Method [HttpGet] public IActionResult GetTest(int ActivityId) { string Store ...

Animating Angular on the table row element

I am currently displaying a table with a list of items that are updated via polling using an http get request to the server. The response is rendered only if there have been changes in the data. My goal is to add animations to the rows of the table and tr ...

Converting binary data to a datetime object with AngularJS

Need help converting a date format to the normal date format. For example, from 12-07-2017. Currently, my output looks like this: /Date(1508896907290) I am working with AngularJS. {{list.DateStamp}} Any suggestions on how to convert binary format to ...

An approach in Python to identify the indices of distinct elements in two arrays

I have two arrays, x and y in numpy, which are sorted. The elements in these arrays never repeat within the same array. My goal is to find a pythonic way of identifying the indexes where the same elements exist in both arrays. x = np.array([1, 2, 8, 11, 15 ...