Getting the highest value of an JSON array and storing it in Data Vue

Question

In my vue component i have a json array of Bids.

I need to get the highest bid from the array and store it into another variable.

My vue component data:

data() {
  return {
    bids: [],
    bid: null,

    veiling_id: this.id,
    showInput: this.auth_check,

     highestBid: null,
  }
},

Getting the bids from DB and storing into bids.

mounted(){
    var veilingid = this.veiling_id;
    var vm = this;
    setInterval(function(){
        axios.get('/veilingen/' + veilingid + '/getbid').
        then(function (response){
            vm.bids = response.data;
        }).catch(function(error) {
            console.log(error);
        });
     }, 1000);

 }

And now how do i loop through Bids, get the highest bid and store it into highestBid?

Also what's the best place to store the code?

Right after the AXIOS get request in the mounted() or somewhere else?

I'm sorry i'n new to Vue.

Any help is appreciated..

Requested JSON:

"[{"id":1,"veiling_id":1,"bid":"100.00","user_id":2,"created_at":"2017-08-31 20:24:20","updated_at":"2017-08-31 20:24:20"},{"id":2,"veiling_id":1,"bid":"40.00","user_id":2,"created_at":"2017-08-31 20:43:11","updated_at":"2017-08-31 20:43:11"},{"id":3,"veiling_id":1,"bid":"3.00","user_id":2,"created_at":"2017-08-31 20:43:34","updated_at":"2017-08-31 20:43:34"},{"id":4,"veiling_id":1,"bid":"4.34","user_id":2,"created_at":"2017-08-31 20:44:32","updated_at":"2017-08-31 20:44:32"},{"id":5,"veiling_id":1,"bid":"900.00","user_id":2,"created_at":"2017-08-31 20:44:49","updated_at":"2017-08-31 20:44:49"},{"id":6,"veiling_id":1,"bid":"90.00","user_id":2,"created_at":"2017-08-31 20:51:55","updated_at":"2017-08-31 20:51:55"},{"id":7,"veiling_id":1,"bid":"90.00","user_id":2,"created_at":"2017-08-31 20:53:10","updated_at":"2017-08-31 20:53:10"},{"id":8,"veiling_id":1,"bid":"3.00","user_id":2,"created_at":"2017-08-31 20:53:18","updated_at":"2017-08-31 20:53:18"},{"id":9,"veiling_id":1,"bid":"3.00","user_id":2,"created_at":"2017-08-31 20:53:59","updated_at":"2017-08-31 20:53:59"},{"id":10,"veiling_id":1,"bid":"50.00","user_id":2,"created_at":"2017-08-31 21:03:17","updated_at":"2017-08-31 21:03:17"},{"id":11,"veiling_id":1,"bid":"1000.00","user_id":2,"created_at":"2017-08-31 21:05:35","updated_at":"2017-08-31 21:05:35"},{"id":12,"veiling_id":1,"bid":"2000.00","user_id":2,"created_at":"2017-09-01 00:07:19","updated_at":"2017-09-01 00:07:19"},{"id":13,"veiling_id":1,"bid":"3.00","user_id":1,"created_at":"2017-09-01 00:28:56","updated_at":"2017-09-01 00:28:56"}]"

tony19 · Accepted Answer · 2022-07-15 21:22:54Z

4

This is a great use case for a computed property.

computed:{
  highestBid(){
    if (this.bids.length == 0) return 
    return this.bids.reduce((a,b) => Number(a.bid) > Number(b.bid) ? a : b)    
  }
},

Here is an example of how that would work.

console.clear()

const bids = [
  {bid: 2000},
  {bid: 1000},
  {bid: 3000},
  {bid: 4000},
  {bid: 100},
  
]

new Vue({
  el: "#app",
  data() {
    return {
      bids: [],
    }
  },
  computed:{
    highestBid(){
      if (this.bids.length == 0) return 
      return this.bids.reduce((a,b) => Number(a.bid) > Number(b.bid) ? a : b)     
    }
  },
  mounted(){
    setTimeout(() => {
      this.bids = bids
    }, 250)
  }
})

<script src="https://unpkg.com/[email protected]"></script>
<div id="app">
  {{highestBid}}
</div>

In the above example, whenever bids is populated or changes, highestBid will return the bid object with the highest value. The setTimeout is just simulating the ajax call.

You can perform your API call in either mounted or created.

Note also I noticed that you are returning your bid values as strings so the code uses Number() to convert them to numbers. There are many ways to convert to numeric values in javascript and you can investigate the best way that works for you.

edited Jul 15, 2022 at 21:22

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Aug 31, 2017 at 22:57

Bert

82.6k17 gold badges205 silver badges166 bronze badges

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

8 Comments

Rubberduck1337106092 Over a year ago

I can't get if (this.bids.length == 0) return this.bids.reduce((a,b) => Number(a.bid) > Number(b.bid) ? a : b) to work somehow, it's return 900 when the highest bid is 2000

Bert Over a year ago

@JordyGroote Can you provide an actual example of your JSON? I'll update with it.

Rubberduck1337106092 Over a year ago

I updated the answer the JSON is at the bottom. @Bert

Bert Over a year ago

@JordyGroote Hm. Browser issue? This seems to work fine. codepen.io/Kradek/pen/mMvyVB?editors=1010

Rubberduck1337106092 Over a year ago

I see, ugh Vue is so hard to learn. Now it completely disappeard and is returning nothing.... Struggles!!!!

|

superup · Accepted Answer · 2020-03-31 07:08:09Z

0

Try this code.

 //params is object
 findWinConfirmed(topConfirmed) {
  let findTop = [];
  topConfirmed.data.forEach(obj => findTop.push(obj.bid));
  return Math.max(...findTop);
}

Hope is help.

answered Mar 31, 2020 at 7:08

superup

2,2871 gold badge16 silver badges13 bronze badges

Collectives™ on Stack Overflow

Getting the highest value of an JSON array and storing it in Data Vue

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related