CODEWITHSUNDEEP
htmlangular
Jose the hose
Jose the hose

Reputation: 1895

Toggle data from JSON on click (Angular 2)

I'm trying to work out how to toggle data from JSON when a user clicks a button on the UI. I am using Angular 2 for this.

The mark up looks like this:

<button type="button" (click)="changeOdds('odds')">odds</button>
<button type="button" (click)="changeOdds('fractionOdds')">fraction odds</button>
<button type="button" (click)="changeOdds('americanOdds')">american odds</button>


 <div *ngFor="let marketOption of market.marketOptions">
     <span>{{ marketOption.fractionOdds }}</span>
 </div>

The JSON data looks like this:

"marketOptions": [
    {
        "americanOdds": -599,
        "fractionOdds": "167/1000",
        "odds": 1.167
    }
]

So currently fractionOdds is displayed, but if a user clicks the button 'american odds' then 'americanOdds' should be displayed from the JSON. I would also need to save the user to a cookie/local storage to save the users selection. But im not sure if thats the best approach. Does anyone know how I can do this with angular 2, or know of any examples online?

EDIT:

Here is a link to the JSON object where 'marketOptions' is located

https://gist.github.com/fogofogo/f4b5ac9a765fc684e7e08b30221c6419

Upvotes: 0

Views: 1048

Answers (2)

Ben
Ben

Reputation: 5626

I'm not super familiar with Angular 2, but see if the below does what you need with the updated data. Plunker @ the bottom is updated, too. but it seems to me like you don't really need that for loop. Instead just keep the span, since whatever button you choose will automatically update the marketOption.

Since your data is a single object multiple objects in a single array you'll also have to make sure you're accessing it correctly. In this case you can loop through the array and select the correct key out of each object, adding those key/value pairs to a new array:

marketOptions =  [
{
    "americanOdds": -599,
    "fractionOdds": "167/1000",
    "odds": 1.167
},
{
    "americanOdds": -800,
    "fractionOdds": "761/1000",
    "odds": 2.7
},
{
    "americanOdds": -123,
    "fractionOdds": "912/1000",
    "odds": .795
}]

selectedOdds = [];
storedOdds = JSON.parse(localStorage.getItem("myprefix_oddsType")) || {};
oddsType = '';

changeOdds = function(e) {
  this.oddsType = e;
  this.selectedOdds = [];
  this.marketOptions.forEach((object, index)=>{
    this.selectedOdds.push(this.marketOptions[index][e])
  })
  this.storedOdds = {
    type: e,
    data: this.selectedOdds
  }
  localStorage.setItem("myprefix_oddsType", JSON.stringify(this.storedOdds));
  this.storedOdds = JSON.parse(localStorage.getItem("myprefix_oddsType"));
}

Html:

<button type="button" (click)="changeOdds('odds')">odds</button>
<button type="button" (click)="changeOdds('fractionOdds')">fraction odds</button>
<button type="button" (click)="changeOdds('americanOdds')">american odds</button>

<div>Here are your {{oddsType}}</div>
<div *ngFor="let odds of selectedOdds">
 <span>{{ odds }}</span>
</div>

As for the storage of the variable, I think that would depend more on what your use case is for storing/recalling the variable. You could use the localStorage object? Note that with the new data you'll have to stringify/parse the object you're passing into localStorage.

Example: https://plnkr.co/edit/wHQrwFXeeN4SGO139Edv?p=preview

Upvotes: 1

Kirk Larkin
Kirk Larkin

Reputation: 93043

Assuming that changeOdds looks something like:

changeOdds(typeOfOdds) {
    this.typeOfOdds = typeOfOdds;
}

You should be able to update <span>{{ marketOption.fractionOdds }}</span> to:

<span>{{ marketOption[typeOfOdds] }}</span>

Upvotes: 2

Related Questions