Mini Program: How to dynamically add and delete JSON object arrays (code attached)-Mini Program Development-php.cn

Mini Program: How to dynamically add and delete JSON object arrays (code attached)

不言

Release： 2018-08-10 17:12:21

Original

9189 people have browsed it

The content of this article is about small programs: how to dynamically add and delete JSON object arrays (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Look at the effect first. When making small programs, we often encounter situations like this:

Directly enter the code:

<view class="add-btn" bindtap=&#39;addItems&#39;>添加</view>

<view wx:for="{{itemLists}}" wx:key="index" class=&#39;list&#39;>
  <input type=&#39;text&#39; value=&#39;{{item.id}}&#39;></input>
  <text>{{item.time}}</text>
  <text class=&#39;delete-btn&#39; data-idx=&#39;{{index}}&#39; bindtap=&#39;deleteIitems&#39;>删除</text>
</view>

Copy after login

.add-btn{
  background: chocolate;
  width: 200rpx;
  text-align: center;
  color: white;
  margin-bottom: 10px;
}
.list{
  display: flex;
  justify-content: space-around;
  border: 1px solid;
}
.delete-btn{
  background: red;
}

Copy after login

Page({

  data: {
    itemLists: [
      { id: 1, time: &#39;00:00:00&#39; },
      { id: 2, time: &#39;00:00:00&#39; },
      { id: 3, time: &#39;00:00:00&#39; }
    ]
  },
  addItems() {
    let list = this.data.itemLists
    list.push({ id: ~~(Math.random()*100), time: &#39;00:00:00&#39; })
    this.setData({
      itemLists: list
    })
  },
  deleteIitems(e) {
    let idx = e.currentTarget.dataset.idx
    let list = this.data.itemLists
    let filterRes = list.filter((ele,index) => {
      return index != idx
    })
    this.setData({
      itemLists: filterRes
    })
  }

})

Copy after login

Summary:

The key is to use the filter method in ES6 to delete the first object in the object array.

Filtering is more often used to filter out specified content.

Related recommendations:

WeChat Mini Program Example: How to call Tencent Map to obtain jsonp data

How to call API implementation in WeChat Mini Program Data request

The above is the detailed content of Mini Program: How to dynamically add and delete JSON object arrays (code attached). For more information, please follow other related articles on the PHP Chinese website!