Add string (API) as a single variable

Question

I need to combine the results of the select / option in a variable (it belongs to the URL of an API) and I am new handling Typescrip, then I get several errors and other things that I don't know how to do. For example, add the results of select / option (url next to cat, diff, type) and then save it in a localStorage to call it to another component (as it did in javascript)

html

<h5>Select Type:</h5>
            <form name="formul2" class="cont">
              <div class="box">
                <select id="type" name="type" [(ngModel)]="typ">
                  <option value="">Any Type</option>
                  <option value="&type=multiple">Multple Choice</option>
                  <option value="&type=boolean">True / False</option>
                </select>
              </div>
            </form>
            <a class="btn" id="fetch" href="game">Play</a>
            <a class="btn" href="highscores">High Scores</a>

TS

export class IndexComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  public diff:string;

  public cat:string;

  public typ:string;
}

const url:string = 'https://opentdb.com/api.php?amount=20';

var newUrl:string = url + diff + cat + typ;

var x = document.getElementById('fetch')

x.addEventListener('click', function(e) {
  localStorage.setItem("urlGame", newUrl);
});

1. url, newUrl , x can't just dangle around somewhere - you need to place them within your class. 2. x.addEventListener(...) needs to be wrapped in a method. 3. Read up about forms in angular, thereby on submit of the form you can retrieve the desired values of the form elements and process them according to your requirement. — Nicholas K
– Nicholas K, Commented Dec 5, 2019 at 6:42

Ininiv · Accepted Answer · 2019-12-05 06:41:36Z

1

Add a change listener method on the select element

<select id="type" name="type" [(ngModel)]="typ" (chnage)="setChange(typ)">
  <option value="">Any Type</option>
  <option value="&type=multiple">Multple Choice</option>
  <option value="&type=boolean">True / False</option>
</select>

Component

const url: string = 'https://opentdb.com/api.php?amount=20';
export class IndexComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  public diff: string;

  public cat: string;

  public typ: string;

  public newUrl: string;

  public setChange(selectedValue: any) {
    this.newUrl = url + this.diff + this.cat + selectedValue;
    localStorage.setItem('urlGame', this.newUrl);
  }
}

You can use "ngx-webstorage-service" for local storage

Example

edited Dec 5, 2019 at 6:41

answered Dec 5, 2019 at 6:06

Ininiv

1,3257 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Luis Fernando Silva Over a year ago

I have three select elements, do I put the setChange () method on all three? (setChange (typ), setChange (diff), setChange (cat))

Ininiv Over a year ago

Basically if you bind seperate ngModel with every element, those variables will automatically gets the updated value. Not necessarily required to listen for all the change event

Himanshu Singh · Accepted Answer · 2019-12-05 06:18:16Z

0

I guess what you are trying to achieve is this as you final url:

https://opentdb.com/api.php?amount=20/diff/cat/typ

If this is the case then it can be achieved using string template as follows:

var newUrl:string = `${this.url}/${this.diff}/${this.cat}/${this.typ}`

answered Dec 5, 2019 at 6:18

Himanshu Singh

2,1651 gold badge8 silver badges16 bronze badges

Comments

Akshay Sharma · Accepted Answer · 2019-12-05 06:57:54Z

0

If you don't know about the data type then you can simple initialize as any

  public any_variable: any;

Try this :

let url:string = "https://www.example.com";
let any_variable:string = `${url}/api/${diff}`;

edited Dec 5, 2019 at 6:57

answered Dec 5, 2019 at 5:52

Akshay Sharma

1,1121 gold badge8 silver badges21 bronze badges

1 Comment

Luis Fernando Silva Over a year ago

but those variable are string

Collectives™ on Stack Overflow

Add string (API) as a single variable

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related