鍍金池/ 問(wèn)答/HTML/ vue中json處理方法

vue中json處理方法

json后端給我的數(shù)據(jù),現(xiàn)在要將 標(biāo)準(zhǔn)陪練-5節(jié) 這條數(shù)據(jù)不展示。我的想法第一想法是要么隱藏,要么處理json刪除這條數(shù)據(jù)。我用delete,但是發(fā)現(xiàn)原json長(zhǎng)度不變只是變空了,而且在v-for渲染的時(shí)候報(bào)錯(cuò)了

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="vue-2.3.0.min.js"></script>

</head>
<body>

<div id="myapp">
    <div v-for="item in json">
        <p>{{item.lesson_name}}</p>
    </div>
</div>

</body>
</html>
<script type="text/javascript">

var app = new Vue({
    el:"#myapp",
    data:function(){
        return{
            json:[
                {"type_name":"正課","lesson_name":"標(biāo)準(zhǔn)陪練課(中級(jí))-90節(jié)","course_name":"標(biāo)準(zhǔn)陪練","lesson_no":"BZ-c2-3","lesson_num":90,"lesson_id":37,"xufei_buy_num":1,"level_name":"中級(jí)","money":11380,"shengyu_lesson_num":100,"free_lesson_num":12,"mode_name":"陪練","tuifei_num":0,"modify_date":"2017-10-16 13:32:41","lesson_min":50,"shouci_buy_num":1},
                {"type_name":"正課","lesson_name":"標(biāo)準(zhǔn)陪練課(中級(jí))-120節(jié)","course_name":"標(biāo)準(zhǔn)陪練","lesson_no":"BZ-c2-4","lesson_num":120,"lesson_id":38,"xufei_buy_num":0,"level_name":"中級(jí)","money":14180,"shengyu_lesson_num":0,"free_lesson_num":0,"mode_name":"陪練","tuifei_num":0,"modify_date":"2017-10-16 13:33:38","lesson_min":50,"shouci_buy_num":0},
                {"type_name":"正課","lesson_name":"標(biāo)準(zhǔn)陪練課(中級(jí))-200節(jié)","course_name":"標(biāo)準(zhǔn)陪練","lesson_no":"BZ-c2-5","lesson_num":200,"lesson_id":39,"xufei_buy_num":0,"level_name":"中級(jí)","money":22880,"shengyu_lesson_num":217,"free_lesson_num":17,"mode_name":"陪練","tuifei_num":0,"modify_date":"2017-10-16 13:35:01","lesson_min":50,"shouci_buy_num":1},
                {"type_name":"正課","lesson_name":"標(biāo)準(zhǔn)陪練課(高級(jí))-30節(jié)","course_name":"標(biāo)準(zhǔn)陪練","lesson_no":"BZ-c3-1","lesson_num":30,"lesson_id":40,"xufei_buy_num":1,"level_name":"高級(jí)","money":4680,"shengyu_lesson_num":35,"free_lesson_num":10,"mode_name":"陪練","tuifei_num":0,"modify_date":"2017-10-16 13:36:20","lesson_min":50,"shouci_buy_num":0},
                {"type_name":"正課","lesson_name":"標(biāo)準(zhǔn)陪練課(高級(jí))-60節(jié)","course_name":"標(biāo)準(zhǔn)陪練","lesson_no":"BZ-c3-2","lesson_num":60,"lesson_id":41,"xufei_buy_num":1,"level_name":"高級(jí)","money":9180,"shengyu_lesson_num":58,"free_lesson_num":2,"mode_name":"陪練","tuifei_num":0,"modify_date":"2017-10-16 13:37:36","lesson_min":50,"shouci_buy_num":0},
                {"type_name":"正課","lesson_name":"標(biāo)準(zhǔn)陪練課(高級(jí))-90節(jié)","course_name":"標(biāo)準(zhǔn)陪練","lesson_no":"BZ-c3-3","lesson_num":90,"lesson_id":42,"xufei_buy_num":0,"level_name":"高級(jí)","money":13480,"shengyu_lesson_num":91,"free_lesson_num":3,"mode_name":"陪練","tuifei_num":0,"modify_date":"2017-10-16 13:38:41","lesson_min":50,"shouci_buy_num":1},
                {"type_name":"正課","lesson_name":"標(biāo)準(zhǔn)陪練課(高級(jí))-120節(jié)","course_name":"標(biāo)準(zhǔn)陪練","lesson_no":"BZ-c3-4","lesson_num":120,"lesson_id":43,"xufei_buy_num":0,"level_name":"高級(jí)","money":17080,"shengyu_lesson_num":0,"free_lesson_num":0,"mode_name":"陪練","tuifei_num":0,"modify_date":"2017-10-16 13:39:45","lesson_min":50,"shouci_buy_num":0},
                {"type_name":"正課","lesson_name":"標(biāo)準(zhǔn)陪練課(高級(jí))-200節(jié)","course_name":"標(biāo)準(zhǔn)陪練","lesson_no":"BZ-c3-5","lesson_num":200,"lesson_id":44,"xufei_buy_num":0,"level_name":"高級(jí)","money":27680,"shengyu_lesson_num":0,"free_lesson_num":0,"mode_name":"陪練","tuifei_num":0,"modify_date":"2017-10-16 13:40:58","lesson_min":50,"shouci_buy_num":0},
                {"type_name":"正課","lesson_name":"標(biāo)準(zhǔn)陪練-20節(jié)","course_name":"標(biāo)準(zhǔn)陪練","lesson_no":"BZ-c0-02","lesson_num":20,"lesson_id":64,"xufei_buy_num":0,"level_name":"全級(jí)別","money":2000,"shengyu_lesson_num":0,"free_lesson_num":0,"mode_name":"陪練","tuifei_num":0,"modify_date":"2017-11-24 15:15:22","lesson_min":50,"shouci_buy_num":0},
                {"type_name":"正課","lesson_name":"標(biāo)準(zhǔn)陪練-5節(jié)","course_name":"標(biāo)準(zhǔn)陪練","lesson_no":"BZ-c0-01","lesson_num":20,"lesson_id":63,"xufei_buy_num":0,"level_name":"全級(jí)別","money":2000,"shengyu_lesson_num":14,"free_lesson_num":0,"mode_name":"陪練","tuifei_num":0,"modify_date":"2017-11-24 15:14:44","lesson_min":25,"shouci_buy_num":1}
            ]
        }
    },
    created:function(){
        //解開(kāi)就報(bào)錯(cuò) 
        // for (let i = 0; i < this.json.length; i++) {
        //     console.log(i)
        //     for(let k in this.json[i]){
        //         if (this.json[i][k] == "標(biāo)準(zhǔn)陪練-5節(jié)") {
        //             delete this.json[i];
        //             break;
        //         }
        //     }
        // }
    }
})

</script>

回答
編輯回答
默念

computed:{

needJson(){
    let a=this.json.pop()
    return this.json.filter(v=>{
        return v!=a
    })
}

}
然后 v-for="item in needJson"

2017年3月26日 23:43
編輯回答
黑與白

大兄弟,用你的方法我也試了下沒(méi)問(wèn)題
下面是代碼

<div id="app">
    <ul>
        <li v-for="needJson in needJsons">{{needJson}}</li>
    </ul>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                jsons: [
                    {
                        "type_name": "正課",
                        "lesson_name": "標(biāo)準(zhǔn)陪練課(中級(jí))-90節(jié)",
                        "course_name": "標(biāo)準(zhǔn)陪練",
                        "lesson_no": "BZ-c2-3",
                        "lesson_num": 90,
                        "lesson_id": 37,
                        "xufei_buy_num": 1,
                        "level_name": "中級(jí)",
                        "money": 11380,
                        "shengyu_lesson_num": 100,
                        "free_lesson_num": 12,
                        "mode_name": "陪練",
                        "tuifei_num": 0,
                        "modify_date": "2017-10-16 13:32:41",
                        "lesson_min": 50,
                        "shouci_buy_num": 1
                    },
                    {
                        "type_name": "正課",
                        "lesson_name": "標(biāo)準(zhǔn)陪練課(中級(jí))-120節(jié)",
                        "course_name": "標(biāo)準(zhǔn)陪練",
                        "lesson_no": "BZ-c2-4",
                        "lesson_num": 120,
                        "lesson_id": 38,
                        "xufei_buy_num": 0,
                        "level_name": "中級(jí)",
                        "money": 14180,
                        "shengyu_lesson_num": 0,
                        "free_lesson_num": 0,
                        "mode_name": "陪練",
                        "tuifei_num": 0,
                        "modify_date": "2017-10-16 13:33:38",
                        "lesson_min": 50,
                        "shouci_buy_num": 0
                    },
                    {
                        "type_name": "正課",
                        "lesson_name": "標(biāo)準(zhǔn)陪練課(中級(jí))-200節(jié)",
                        "course_name": "標(biāo)準(zhǔn)陪練",
                        "lesson_no": "BZ-c2-5",
                        "lesson_num": 200,
                        "lesson_id": 39,
                        "xufei_buy_num": 0,
                        "level_name": "中級(jí)",
                        "money": 22880,
                        "shengyu_lesson_num": 217,
                        "free_lesson_num": 17,
                        "mode_name": "陪練",
                        "tuifei_num": 0,
                        "modify_date": "2017-10-16 13:35:01",
                        "lesson_min": 50,
                        "shouci_buy_num": 1
                    },
                    {
                        "type_name": "正課",
                        "lesson_name": "標(biāo)準(zhǔn)陪練課(高級(jí))-30節(jié)",
                        "course_name": "標(biāo)準(zhǔn)陪練",
                        "lesson_no": "BZ-c3-1",
                        "lesson_num": 30,
                        "lesson_id": 40,
                        "xufei_buy_num": 1,
                        "level_name": "高級(jí)",
                        "money": 4680,
                        "shengyu_lesson_num": 35,
                        "free_lesson_num": 10,
                        "mode_name": "陪練",
                        "tuifei_num": 0,
                        "modify_date": "2017-10-16 13:36:20",
                        "lesson_min": 50,
                        "shouci_buy_num": 0
                    },
                    {
                        "type_name": "正課",
                        "lesson_name": "標(biāo)準(zhǔn)陪練課(高級(jí))-60節(jié)",
                        "course_name": "標(biāo)準(zhǔn)陪練",
                        "lesson_no": "BZ-c3-2",
                        "lesson_num": 60,
                        "lesson_id": 41,
                        "xufei_buy_num": 1,
                        "level_name": "高級(jí)",
                        "money": 9180,
                        "shengyu_lesson_num": 58,
                        "free_lesson_num": 2,
                        "mode_name": "陪練",
                        "tuifei_num": 0,
                        "modify_date": "2017-10-16 13:37:36",
                        "lesson_min": 50,
                        "shouci_buy_num": 0
                    },
                    {
                        "type_name": "正課",
                        "lesson_name": "標(biāo)準(zhǔn)陪練課(高級(jí))-90節(jié)",
                        "course_name": "標(biāo)準(zhǔn)陪練",
                        "lesson_no": "BZ-c3-3",
                        "lesson_num": 90,
                        "lesson_id": 42,
                        "xufei_buy_num": 0,
                        "level_name": "高級(jí)",
                        "money": 13480,
                        "shengyu_lesson_num": 91,
                        "free_lesson_num": 3,
                        "mode_name": "陪練",
                        "tuifei_num": 0,
                        "modify_date": "2017-10-16 13:38:41",
                        "lesson_min": 50,
                        "shouci_buy_num": 1
                    },
                    {
                        "type_name": "正課",
                        "lesson_name": "標(biāo)準(zhǔn)陪練課(高級(jí))-120節(jié)",
                        "course_name": "標(biāo)準(zhǔn)陪練",
                        "lesson_no": "BZ-c3-4",
                        "lesson_num": 120,
                        "lesson_id": 43,
                        "xufei_buy_num": 0,
                        "level_name": "高級(jí)",
                        "money": 17080,
                        "shengyu_lesson_num": 0,
                        "free_lesson_num": 0,
                        "mode_name": "陪練",
                        "tuifei_num": 0,
                        "modify_date": "2017-10-16 13:39:45",
                        "lesson_min": 50,
                        "shouci_buy_num": 0
                    },
                    {
                        "type_name": "正課",
                        "lesson_name": "標(biāo)準(zhǔn)陪練課(高級(jí))-200節(jié)",
                        "course_name": "標(biāo)準(zhǔn)陪練",
                        "lesson_no": "BZ-c3-5",
                        "lesson_num": 200,
                        "lesson_id": 44,
                        "xufei_buy_num": 0,
                        "level_name": "高級(jí)",
                        "money": 27680,
                        "shengyu_lesson_num": 0,
                        "free_lesson_num": 0,
                        "mode_name": "陪練",
                        "tuifei_num": 0,
                        "modify_date": "2017-10-16 13:40:58",
                        "lesson_min": 50,
                        "shouci_buy_num": 0
                    },
                    {
                        "type_name": "正課",
                        "lesson_name": "標(biāo)準(zhǔn)陪練-20節(jié)",
                        "course_name": "標(biāo)準(zhǔn)陪練",
                        "lesson_no": "BZ-c0-02",
                        "lesson_num": 20,
                        "lesson_id": 64,
                        "xufei_buy_num": 0,
                        "level_name": "全級(jí)別",
                        "money": 2000,
                        "shengyu_lesson_num": 0,
                        "free_lesson_num": 0,
                        "mode_name": "陪練",
                        "tuifei_num": 0,
                        "modify_date": "2017-11-24 15:15:22",
                        "lesson_min": 50,
                        "shouci_buy_num": 0
                    },
                    {
                        "type_name": "正課",
                        "lesson_name": "標(biāo)準(zhǔn)陪練-5節(jié)",
                        "course_name": "標(biāo)準(zhǔn)陪練",
                        "lesson_no": "BZ-c0-01",
                        "lesson_num": 20,
                        "lesson_id": 63,
                        "xufei_buy_num": 0,
                        "level_name": "全級(jí)別",
                        "money": 2000,
                        "shengyu_lesson_num": 14,
                        "free_lesson_num": 0,
                        "mode_name": "陪練",
                        "tuifei_num": 0,
                        "modify_date": "2017-11-24 15:14:44",
                        "lesson_min": 25,
                        "shouci_buy_num": 1
                    }
                ]
            }
        },
        computed: {
            needJsons: function () {
                let _this = this;
                this.jsons.forEach(function (item, index) {
                    if (item.lesson_name === '標(biāo)準(zhǔn)陪練-5節(jié)') {
                        _this.jsons.splice(index, 1);
                    }
                })
                return _this.jsons
            }
        }

    })

不過(guò)還是推薦使用v-if 來(lái)達(dá)到目的

2017年11月15日 08:30
編輯回答
哎呦喂

我覺(jué)得你這個(gè)把它整麻煩了,完全沒(méi)必要非要去操作數(shù)據(jù),你不想要那條數(shù)據(jù),就不讓那一條顯示就好,而且你可以把你現(xiàn)在created周期里的函數(shù)放到mouted里面試一下,看是不是你那個(gè)邏輯寫(xiě)錯(cuò)了。

我的解決辦法是(不用created里面刪除數(shù)據(jù),不顯示那一條就行):

<div id="myapp">
    //當(dāng)根據(jù)數(shù)據(jù)循環(huán)創(chuàng)建時(shí),若課程名稱不等于不想顯示的那一條數(shù)據(jù)才使其創(chuàng)建,否則不創(chuàng)建
    <div v-for="item in json" v-if="item.lesson_name != '標(biāo)準(zhǔn)陪練-5節(jié)'">
        <p>{{item.lesson_name}}</p>
    </div>
</div>
2017年8月5日 12:55
編輯回答
不討囍

首先,不需要顯示的數(shù)據(jù)你不調(diào)用不就行了么?

this.json = this.json.filter(lesson => lesson.lesson_name !== '標(biāo)準(zhǔn)xxx');
2018年1月20日 23:54