Toggle data from JSON on click (Angular 2)

Question

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

Kirk Larkin · Accepted Answer · 2017-09-13 08:39:13Z

2

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>

answered Sep 13, 2017 at 8:39

Kirk Larkin

94.4k17 gold badges236 silver badges214 bronze badges

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

Comments

Ben · Accepted Answer · 2017-09-13 15:55:51Z

1

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

edited Sep 13, 2017 at 15:55

answered Sep 12, 2017 at 22:47

Ben

5,6952 gold badges24 silver badges32 bronze badges

5 Comments

Jose the hose Over a year ago

Many thanks for your answer! Thing is i do need that loop as there may be several marketOptions which is why its an array. Sorry I should have said that

Ben Over a year ago

Are the 3 object keys always 'american'/'fraction'/'odds' just with different values? Assuming so, then I'd guess that there are always just those three buttons? If that's not the case could you update your question with a few more details on what the JSON/markup would look like as it expands?

Jose the hose Over a year ago

"Are the 3 object keys always 'american'/'fraction'/'odds' just with different values?" Thats correct. I'll update the post with some sample JSON. Thanks again

Ben Over a year ago

Thanks for the update, I updated the answer as well to be (maybe?) more inline with what you're looking for.

Jose the hose Over a year ago

Many thanks for your answer. Kirks was closer to what I needed but I used the local storage from your answer. Thank you for taking the time to write the code!

Collectives™ on Stack Overflow

Toggle data from JSON on click (Angular 2)

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related