html5 - Vue 2.0 javaScript 数组循环push json 对象问题

查看：108
本文介绍了html5 - Vue 2.0 javaScript 数组循环push json 对象问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

问 题

我需要将一个大数组 以里面的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"
          }
        ]
      }
    ]
  }
}

整的代码块

有问题的数据输出

没有问题的数据输出

这个问题已被关闭，原因：问题已解决 - 问题已解决，且对他人无借鉴意义

解决方案

用了比较新的语法，其中 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);

这篇关于html5 - Vue 2.0 javaScript 数组循环push json 对象问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆