如何去除数组中的相同id的元素

1.问题
如何去除数组中的相同id的元素
2.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script charset="utf-8" src="lib/avalon2.2.4.js"></script>
</head>
<body ms-controller="vm">
<div ms-for="el in @data.details" >
    <div ms-for="ee in el.value.split(',')">
        <input type="checkbox" ms-duplex="@inputMap[el.id]" ms-attr="{value:ee}" ms-change="@bbb(@inputMap[el.id],el.id)">

        <label ms-text="ee"></label>
    </div>
</div>
<script>
    var datacmy={
        "bizData": {
            "resultMsg": "查询成功",
            "result": 1,
            "data": {
                "applyEnd": 1484727271619,
                "applyStart": 1484727271619,
                "content": "招生内容",
                "details": [
                    {
                        "applyId": 10,
                        "createDate": 1486363365531,
                        "createDateAsDate": "2017-02-06 14:42:45",
                        "creator": "065619a0e66b11e5bed7fa163e33daaa",
                        "id": 36,
                        "lastModDate": 1486363365531,
                        "lastModDateAsDate": "2017-02-06 14:42:45",
                        "lastModifier": "065619a0e66b11e5bed7fa163e33daaa",
                        "plugType": 5,
                        "status": 1,
                        "title": "兴趣爱好",
                        "value": "萌妹,御姐,萝莉,大妈"
                    },
                    {
                        "applyId": 10,
                        "createDate": 1486363365531,
                        "createDateAsDate": "2017-02-06 14:42:45",
                        "creator": "065619a0e66b11e5bed7fa163e33daaa",
                        "id": 37,
                        "lastModDate": 1486363365531,
                        "lastModDateAsDate": "2017-02-06 14:42:45",
                        "lastModifier": "065619a0e66b11e5bed7fa163e33daaa",
                        "plugType": 5,
                        "status": 1,
                        "title": "爱好",
                        "value": "妹,姐,莉,妈"
                    }
                ],
                "name": "招生需求名称",
                "recruitAuthId": 35,
                "recruitEnd": 1484727271619,
                "recruitStart": 1484727271619,
                "unitCodes": "6101024001",
                "unitNames": "矮新国际"
            }
        },
        "rtnCode": "0000000",
        "ts": 1486367288254
    };
    var arr=[];
    var arr2=[];
    var vm=avalon.define({
        $id:'vm',
        map:{"123":[],"45":[]},
        inputMap:{},
        data:{},
        arr:[],
        init:function(){

          vm.data=datacmy.bizData.data;
            var ttt={};
            var details=datacmy.bizData.data.details;
            for(var i=0;i<details.length;i++){
                ttt[details[i].id]=[];
            }
            vm.inputMap=ttt;
//            alert(JSON.stringify(vm.inputMap));
            //alert(vm.data);
        },
        aaa:function(e){
            console.log(e)
        },

        bbb:function(e,id){
            e= e.toString();
            var list={
                id:id,
                value:e
            };

            arr.push(list);
            var a={};
            for(var i=0;i<arr.length;i++){
                if(arr[i].id==arr[i].id){
                    arr2.shift(arr[i])
                    arr2.push(arr[i])
                }else{

                }
            }
            console.log(JSON.stringify(arr2))
        }
    });

    vm.init();
</script>
</body>
</html>

3.运行的结果
图片描述

4.期待最后输出的结果

[{"id":36,"value":"萌妹,御姐"},{"id":37,"value":"妹,姐"}]

5.原本已经采纳一个答案,但是被删掉了,先补充此问题答案完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script charset="utf-8" src="lib/avalon2.2.4.js"></script>
</head>
<body ms-controller="vm">
<div ms-for="el in @data.details" >
    <div ms-for="ee in el.value.split(',')">
        <input type="checkbox" ms-duplex="@inputMap[el.id]" ms-attr="{value:ee}" ms-change="@bbb(@inputMap[el.id],el.id)">

        <label ms-text="ee"></label>
    </div>
</div>
<script>
    var datacmy={
        "bizData": {
            "resultMsg": "查询成功",
            "result": 1,
            "data": {
                "applyEnd": 1484727271619,
                "applyStart": 1484727271619,
                "content": "招生内容",
                "details": [
                    {
                        "applyId": 10,
                        "createDate": 1486363365531,
                        "createDateAsDate": "2017-02-06 14:42:45",
                        "creator": "065619a0e66b11e5bed7fa163e33daaa",
                        "id": 36,
                        "lastModDate": 1486363365531,
                        "lastModDateAsDate": "2017-02-06 14:42:45",
                        "lastModifier": "065619a0e66b11e5bed7fa163e33daaa",
                        "plugType": 5,
                        "status": 1,
                        "title": "兴趣爱好",
                        "value": "萌妹,御姐,萝莉,大妈"
                    },
                    {
                        "applyId": 10,
                        "createDate": 1486363365531,
                        "createDateAsDate": "2017-02-06 14:42:45",
                        "creator": "065619a0e66b11e5bed7fa163e33daaa",
                        "id": 37,
                        "lastModDate": 1486363365531,
                        "lastModDateAsDate": "2017-02-06 14:42:45",
                        "lastModifier": "065619a0e66b11e5bed7fa163e33daaa",
                        "plugType": 5,
                        "status": 1,
                        "title": "爱好",
                        "value": "妹,姐,莉,妈"
                    }
                ],
                "name": "招生需求名称",
                "recruitAuthId": 35,
                "recruitEnd": 1484727271619,
                "recruitStart": 1484727271619,
                "unitCodes": "6101024001",
                "unitNames": "矮新国际"
            }
        },
        "rtnCode": "0000000",
        "ts": 1486367288254
    };
    var arr=[];
    var arr2=[];
    var vm=avalon.define({
        $id:'vm',
        map:{"123":[],"45":[]},
        inputMap:{},
        data:{},
        arr:[],
        init:function(){

          vm.data=datacmy.bizData.data;
            var ttt={};
            var details=datacmy.bizData.data.details;
            for(var i=0;i<details.length;i++){
                ttt[details[i].id]=[];
            }
            vm.inputMap=ttt;
//            alert(JSON.stringify(vm.inputMap));
            //alert(vm.data);
        },
        aaa:function(e){
            console.log(e)
        },

        bbb:function(e,id){
            e= e.toString();
            var target=null;
            for(var i=0;i<arr.length;i++){
                if(arr[i].id===id){
                    target=arr[i];
                    break;
                }
            }
            if(target!==null){
                target.value=e;
                console.log(JSON.stringify(arr));
            }else{
                arr.push({id:id,value:e});
            }
            
            console.log(JSON.stringify(arr))
        }
    });

    vm.init();
</script>
</body>
</html>
阅读 6.5k
2 个回答
bbb:function(e,id){
            e= e.toString();
            var target=null;
            for(var i=0;i<arr.length;i++){
                if(arr[i].id===id){
                    target=arr[i];
                    break;
                }
            }
            if(target!==null){
                target.value=e;
                console.log(JSON.stringify(arr));
            }else{
                arr.push({id:id,value:e});
            }
            
            console.log(JSON.stringify(arr))
        }

不知道题主是否用过函数式编程、

underscore.js用作函数式编程、下面的filter方法可以解决您的问题、用好了很多对象数组的操作会变得简单

http://www.css88.com/doc/unde...

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题