html5 - Vue 2.0 javaScript 数组循环push json 对象问题
黄舟
黄舟 2017-04-11 12:51:26
[JavaScript讨论组]

我需要将一个大数组 以里面的json其中一个值去分成两个数组。 我用push 出现了引用问题, 导致数据不准。请问需要怎么解决,我用的 vue2.0

以下是数组, 用各json里面的type 分为两类。 type = 1 为 needArr ,type = 2 为serverArr 。


    "NEED_ITEM": [
      {
        "IS_VISIT": "0",
        "ITEM_ID": "1",
        "ITEM_NAME": "机油",
        "INTRO": "推荐5000公里修理一次\/6个月",
        "PRICE": "100",
        "ITEM_STATUS": "1",
        "ITEM_TYPE": "1",
        "ITEMS": [
          {
            "ITEM_ID": "23",
            "ITEM_NAME": "嘉实多(极护)0W-40全合成机油 7L ",
            "PRICE": "602",
            "IMG_URL": "http:\/\/www.52cdd.com\/Butler\/data\/attachment\/image\/20160823\/1010aecf50b12c9827c5a00d7132eae8.jpg",
            "IS_VOUCH": "1"
          },
          {
            "ITEM_ID": "41",
            "ITEM_NAME": "金美孚0W-40全合成机油 7L ",
            "PRICE": "726",
            "IMG_URL": "http:\/\/www.52cdd.com\/Butler\/data\/attachment\/image\/20160823\/1010aecf50b12c9827c5a00d7132eae8.jpg",
            "IS_VOUCH": "1"
          },
          {
            "ITEM_ID": "55",
            "ITEM_NAME": "壳牌(灰喜力)5W-30全合成机油 7L ",
            "PRICE": "614",
            "IMG_URL": "http:\/\/www.52cdd.com\/Butler\/data\/attachment\/image\/20160823\/1010aecf50b12c9827c5a00d7132eae8.jpg",
            "IS_VOUCH": "1"
          },
          {
            "ITEM_ID": "982",
            "ITEM_NAME": "俄罗斯原装进口5W-40合成机油 7L",
            "PRICE": "508",
            "IMG_URL": "http:\/\/www.52cdd.com\/Butler\/data\/attachment\/image\/20160823\/1010aecf50b12c9827c5a00d7132eae8.jpg",
            "IS_VOUCH": "1"
          },
          {
            "ITEM_ID": "1646",
            "ITEM_NAME": "俄罗斯原装进口5W-30全合成机油 7L",
            "PRICE": "764",
            "IMG_URL": "http:\/\/www.52cdd.com\/Butler\/data\/attachment\/image\/20160823\/1010aecf50b12c9827c5a00d7132eae8.jpg",
            "IS_VOUCH": "1"
          },
          {
            "ITEM_ID": "",
            "ITEM_NAME": null,
            "PRICE": "764",
            "IMG_URL": "http:\/\/www.52cdd.com\/Butler\/data\/attachment\/image\/20160823\/1010aecf50b12c9827c5a00d7132eae8.jpg",
            "IS_VOUCH": "1"
          },
          {
            "ITEM_ID": "",
            "ITEM_NAME": null,
            "PRICE": "508",
            "IMG_URL": "http:\/\/www.52cdd.com\/Butler\/data\/attachment\/image\/20160823\/1010aecf50b12c9827c5a00d7132eae8.jpg",
            "IS_VOUCH": "1"
          }
        ]
      },
      {
        "IS_VISIT": "0",
        "ITEM_ID": "2",
        "ITEM_NAME": "机油滤清器",
        "INTRO": "推荐5000公里修理一次\/6个月",
        "PRICE": "100",
        "ITEM_STATUS": "1",
        "ITEM_TYPE": "1",
        "ITEMS": [
          {
            "ITEM_ID": "0",
            "ITEM_NAME": "暂无此配件,请致电4008200260",
            "PRICE": "0",
            "IMG_URL": "",
            "IS_VOUCH": "1"
          }
        ]
      },
      {
        "IS_VISIT": "0",
        "ITEM_ID": "5",
        "ITEM_NAME": "空气滤清器",
        "INTRO": "推荐5000公里修理一次\/6个月",
        "PRICE": "100",
        "ITEM_STATUS": "1",
        "ITEM_TYPE": "1",
        "ITEMS": [
          {
            "ITEM_ID": "0",
            "ITEM_NAME": "暂无此配件,请致电4008200260",
            "PRICE": "0",
            "IMG_URL": "",
            "IS_VOUCH": "1"
          }
        ]
      },
      {
        "IS_VISIT": "1",
        "ITEM_ID": "6",
        "ITEM_NAME": "火花塞",
        "INTRO": "推荐5000公里修理一次\/6个月",
        "PRICE": "80",
        "ITEM_STATUS": "3",
        "ITEM_TYPE": "2",
        "ITEMS": [
          {
            "ITEM_ID": "0",
            "ITEM_NAME": "暂无此配件,请致电4008200260",
            "PRICE": "0",
            "IMG_URL": "",
            "IS_VOUCH": "1"
          }
        ]
      },
      {
        "IS_VISIT": "1",
        "ITEM_ID": "8",
        "ITEM_NAME": "刹车油",
        "INTRO": "推荐5000公里修理一次\/6个月",
        "PRICE": "100",
        "ITEM_STATUS": "3",
        "ITEM_TYPE": "2",
        "ITEMS": [
          {
            "ITEM_ID": "0",
            "ITEM_NAME": "暂无此配件,请致电4008200260",
            "PRICE": "0",
            "IMG_URL": "",
            "IS_VOUCH": "1"
          }
        ]
      },
      {
        "IS_VISIT": "1",
        "ITEM_ID": "7",
        "ITEM_NAME": "变速箱油",
        "INTRO": "推荐5000公里修理一次\/6个月",
        "PRICE": "100",
        "ITEM_STATUS": "3",
        "ITEM_TYPE": "2",
        "ITEMS": [
          {
            "ITEM_ID": "0",
            "ITEM_NAME": "暂无此配件,请致电4008200260",
            "PRICE": "0",
            "IMG_URL": "",
            "IS_VOUCH": "1"
          }
        ]
      }
    ]

我的代码 ,以下代码导致两组数据不准确。

        for (var i = 0; i < needItem.length; i++) {
          for (var j = 0; j< needItem[i].ITEMS.length; j++) {
            console.log(1);
            if (needItem[i].ITEMS[j].IS_VOUCH == 1) {
              needItem[i].VOUCH_ITEM = needItem[i].ITEMS[j];
              break;
            }
          }
        }

更新原数据

{
  "RESPCODE": 0,
  "RESPMSG": "操作成功",
  "RESULT": {
    "MIN_SEP": "5000",
    "MAIN_MILEAGE": "100000",
    "IS_CAN_STORE": "0",
    "NEED_ITEM": [
      {
        "IS_VISIT": "0",
        "ITEM_ID": "1",
        "ITEM_NAME": "机油",
        "INTRO": "推荐5000公里修理一次\/6个月",
        "PRICE": "100",
        "ITEM_STATUS": "1",
        "ITEM_TYPE": "1",
        "ITEMS": [
          {
            "ITEM_ID": "23",
            "ITEM_NAME": "嘉实多(极护)0W-40全合成机油 7L ",
            "PRICE": "602",
            "IMG_URL": "http:\/\/www.52cdd.com\/Butler\/data\/attachment\/image\/20160823\/1010aecf50b12c9827c5a00d7132eae8.jpg",
            "IS_VOUCH": "1"
          },
          {
            "ITEM_ID": "41",
            "ITEM_NAME": "金美孚0W-40全合成机油 7L ",
            "PRICE": "726",
            "IMG_URL": "http:\/\/www.52cdd.com\/Butler\/data\/attachment\/image\/20160823\/1010aecf50b12c9827c5a00d7132eae8.jpg",
            "IS_VOUCH": "1"
          },
          {
            "ITEM_ID": "55",
            "ITEM_NAME": "壳牌(灰喜力)5W-30全合成机油 7L ",
            "PRICE": "614",
            "IMG_URL": "http:\/\/www.52cdd.com\/Butler\/data\/attachment\/image\/20160823\/1010aecf50b12c9827c5a00d7132eae8.jpg",
            "IS_VOUCH": "1"
          },
          {
            "ITEM_ID": "982",
            "ITEM_NAME": "俄罗斯原装进口5W-40合成机油 7L",
            "PRICE": "508",
            "IMG_URL": "http:\/\/www.52cdd.com\/Butler\/data\/attachment\/image\/20160823\/1010aecf50b12c9827c5a00d7132eae8.jpg",
            "IS_VOUCH": "1"
          },
          {
            "ITEM_ID": "1646",
            "ITEM_NAME": "俄罗斯原装进口5W-30全合成机油 7L",
            "PRICE": "764",
            "IMG_URL": "http:\/\/www.52cdd.com\/Butler\/data\/attachment\/image\/20160823\/1010aecf50b12c9827c5a00d7132eae8.jpg",
            "IS_VOUCH": "1"
          },
          {
            "ITEM_ID": "",
            "ITEM_NAME": null,
            "PRICE": "764",
            "IMG_URL": "http:\/\/www.52cdd.com\/Butler\/data\/attachment\/image\/20160823\/1010aecf50b12c9827c5a00d7132eae8.jpg",
            "IS_VOUCH": "1"
          },
          {
            "ITEM_ID": "",
            "ITEM_NAME": null,
            "PRICE": "508",
            "IMG_URL": "http:\/\/www.52cdd.com\/Butler\/data\/attachment\/image\/20160823\/1010aecf50b12c9827c5a00d7132eae8.jpg",
            "IS_VOUCH": "1"
          }
        ]
      },
      {
        "IS_VISIT": "0",
        "ITEM_ID": "2",
        "ITEM_NAME": "机油滤清器",
        "INTRO": "推荐5000公里修理一次\/6个月",
        "PRICE": "100",
        "ITEM_STATUS": "1",
        "ITEM_TYPE": "1",
        "ITEMS": [
          {
            "ITEM_ID": "0",
            "ITEM_NAME": "暂无此配件,请致电4008200260",
            "PRICE": "0",
            "IMG_URL": "",
            "IS_VOUCH": "1"
          }
        ]
      },
      {
        "IS_VISIT": "0",
        "ITEM_ID": "5",
        "ITEM_NAME": "空气滤清器",
        "INTRO": "推荐5000公里修理一次\/6个月",
        "PRICE": "100",
        "ITEM_STATUS": "1",
        "ITEM_TYPE": "1",
        "ITEMS": [
          {
            "ITEM_ID": "0",
            "ITEM_NAME": "暂无此配件,请致电4008200260",
            "PRICE": "0",
            "IMG_URL": "",
            "IS_VOUCH": "1"
          }
        ]
      },
      {
        "IS_VISIT": "1",
        "ITEM_ID": "6",
        "ITEM_NAME": "火花塞",
        "INTRO": "推荐5000公里修理一次\/6个月",
        "PRICE": "80",
        "ITEM_STATUS": "3",
        "ITEM_TYPE": "2",
        "ITEMS": [
          {
            "ITEM_ID": "0",
            "ITEM_NAME": "暂无此配件,请致电4008200260",
            "PRICE": "0",
            "IMG_URL": "",
            "IS_VOUCH": "1"
          }
        ]
      },
      {
        "IS_VISIT": "1",
        "ITEM_ID": "8",
        "ITEM_NAME": "刹车油",
        "INTRO": "推荐5000公里修理一次\/6个月",
        "PRICE": "100",
        "ITEM_STATUS": "3",
        "ITEM_TYPE": "2",
        "ITEMS": [
          {
            "ITEM_ID": "0",
            "ITEM_NAME": "暂无此配件,请致电4008200260",
            "PRICE": "0",
            "IMG_URL": "",
            "IS_VOUCH": "1"
          }
        ]
      },
      {
        "IS_VISIT": "1",
        "ITEM_ID": "7",
        "ITEM_NAME": "变速箱油",
        "INTRO": "推荐5000公里修理一次\/6个月",
        "PRICE": "100",
        "ITEM_STATUS": "3",
        "ITEM_TYPE": "2",
        "ITEMS": [
          {
            "ITEM_ID": "0",
            "ITEM_NAME": "暂无此配件,请致电4008200260",
            "PRICE": "0",
            "IMG_URL": "",
            "IS_VOUCH": "1"
          }
        ]
      }
    ]
  }
}

整的代码块

有问题的数据输出

没有问题的数据输出

黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

全部回复(4)
天蓬老师

用了比较新的语法,其中 find() 函数如果不支持可以自己用循环实现。

const needItem = [];
const serverItem = [];

const all = {
    "1": needItem,
    "2": serverItem
};

data.RESULT.NEED_ITEM.forEach(item => {
    all[item.ITEM_TYPE].push(item);
});

console.log(needItem);
console.log("------------");
console.log(serverItem);

needItem.forEach(item => {
    const found = item.ITEMS.find(t => t.IS_VOUCH == 1);
    if (found) {
        item.VOUCH_ITEM = found;
    }
});

console.log("------------");
console.log(needItem);
巴扎黑
var needArr = [];
    var serverArr = [];
    for (var i = 0; i < NEED_ITEM.length; i++) {
       if (NEED_ITEM[i]["ITEM_TYPE"]  === "1") {
           needArr.push(NEED_ITEM[I]);
       } else if (NEED_ITEM[i]["ITEM_TYPE"]=== "2") {
           serverArr.push(NEED_ITEM[i]);
       }
    }
怪我咯

Vue的数据绑定后, 输出的东西就有问题了。这是上门原因?

        this.needItem = needItem;
        this.serverItem = serverItem;
PHP中文网

信息太多了实在看不下去了,如果是引用问题可以使用Object.assign去解决对象指针问题(深拷贝)。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号