获取JSON数组的最高值并将其存储在Data Vue中

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

在我的vue组件中,我有一个bson的json数组。

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

我需要从数组中获得最高出价并将其存储到另一个变量中。

My vue component data:

我的vue组件数据:

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?

现在我如何循环Bids,获得最高出价并将其存储到highestBid?

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

还有什么是存储代码的最佳位置?

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

AXIOS在mount()或其他地方获取请求之后?

I'm sorry i'n new to Vue.

对不起,我很抱歉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"}]"

1 个解决方案

#1

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/vue@2.4.2"></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.

在上面的示例中,无论何时填充或更改出价,highestBid都会返回具有最高值的出价对象。 setTimeout只是模拟ajax调用。

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

您可以在已安装或已创建的情况下执行API调用。

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.

另请注意,我注意到您将出价值作为字符串返回,因此代码使用Number()将它们转换为数字。有很多方法可以在javascript中转换为数值,您可以调查适合您的最佳方式。

#1