旧颜_
2019-03-28 10:45
采纳率: 100%
浏览 841

js遍历json根据id选择属性值显示对应的div?

有3个json,它们之间可以找到相同的id,我想要的是选择了属性1下面的属性值,然后再选择属性2下面的属性值(属性1是必有的,但是属性2可能有的情况下没有),请问我该怎么写js可以实现?
//属性1
var arr1 = {
"attributes": {
"1": {
"id": "1",
"options": [{
"id": "2",
"products": ["4", "5"]
}, {
"id": "3",
"label": "0.05Ohm",
"price": "3",
"oldPrice": "3",
"products": ["6"]
}]
},
"7": {
"id": "7",
"options": [{
"id": "8",
"products": ["4"]
}, {
"id": "9",
"products": ["10"]
}]
}
},
"template": "price",
}
//属性2
var arr2 = {
"7":{
"8":[
"4"
],
"9":[
"10"
]
},
"1":{
"2":[
"4",
"5"
],
"3":[
"6"
]
}
}
//仓库
var arr3={
"4":{
"qty":"5",
"html":"Warehouse1”
},
"5":{
"qty":"6",
"html":"Warehouse2"
},
"6":{
"qty":"22",
"html":"Warehouse3"
},
"10":{
"qty":"13",
"html":"Warehouse4"
}
}

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • DRACULAX05 2019-03-28 19:15
    已采纳

    我觉得你的需求应该是根据arr2的输入去得到对应的arr3里的库存信息吧,其中arr1是作为商品表作为过渡
    废话不说,代码如下

    Array.intersect = function(arr1, arr2) {
      if(Object.prototype.toString.call(arr1) === "[object Array]" && Object.prototype.toString.call(arr2) === "[object Array]") {
        return arr1.filter(function(v){ 
         return arr2.indexOf(v)!==-1 
        }) 
      }
    }
    
    var i = 0;
    for(var k1 in arr2) {
        for(var k2 in arr2[k1]) {
            var options = arr1.attributes[k1].options;
            var found = false;
            for(i = 0; i < options.length; i++) {
                if(options[i].id == k2) {
                    found = true;
                    break;
                }
            }
            if(!found) continue;
    
            var products = options[i].products;
            // 求商品表和购买表的交集
            products = Array.intersect(products, arr2[k1][k2]);
            for(i = 0; i < products.length; i++){
                console.log(k1 + ":" + k2 + ":" + products[i] + "=");
                console.log(arr3[products[i]]);
            }
        }
    }
    
    点赞 打赏 评论
  • SHI0ELD 2019-03-28 11:03

    建议使用markdown语法格式化一下JS代码,提高适读性,如:

    var arr1 = {
        "attributes": {
            "1": {
                "id": "1",
                "options": [{
                        "id": "2",
                        "products": ["4", "5"]
                    }, {
                        "id": "3",
                        "label": "0.05Ohm",
                        "price": "3",
                        "oldPrice": "3",
                        "products": ["6"]
                    }
                ]
            },
            "7": {
                "id": "7",
                "options": [{
                        "id": "8",
                        "products": ["4"]
                    }, {
                        "id": "9",
                        "products": ["10"]
                    }
                ]
            }
        },
        "template": "price",
    }
    //属性2
    var arr2 = {
        "7": {
            "8": [
                "4"
            ],
            "9": [
                "10"
            ]
        },
        "1": {
            "2": [
                "4",
                "5"
            ],
            "3": [
                "6"
            ]
        }
    }
    //仓库
    var arr3 = {
        "4": {
            "qty": "5",
            "html": "
    
            Warehouse1
            "
        },
        "5": {
            "qty": "6",
            "html": "
            Warehouse2
            "
        },
        "6": {
            "qty": "22",
            "html": "
            Warehouse3
            "
        },
        "10": {
            "qty": "13",
            "html": "
            Warehouse4
            "
        }
    }
    
    <dl>
        <dt>
            <label>属性1</label>
        </dt>
        <dd>
            <select name="super_attribute[1]" id="attribute1">
                <option value="">Choose an Option...</option>
                <option value="2">0.04Ohm</option>
                <option value="3">0.05Ohm</option>
            </select>
        </dd>
        <dt>
            <label>属性2</label>
        </dt>
        <dd>
            <select name="super_attribute[7]" id="attribute7">
                <option value="">Choose an Option...</option>
                <option value="8">Black</option>
                <option value="9">Red</option>
            </select>
        </dd>
        <dt>
            <label>Warehouse</label>
        </dt>
        <dd>
            <!--根据上面选择的属性值显示对应的仓库内容-->
        </dd>
    </dl>
    <dl>
        <dt>
            <label>属性1</label>
        </dt>
        <dd>
            <select name="super_attribute[1]" id="attribute1">
                <option value="">Choose an Option...</option>
                <option value="2">0.04Ohm</option>
                <option value="3">0.05Ohm</option>
            </select>
        </dd>
        <dt>
            <label>属性2</label>
        </dt>
        <dd>
            <select name="super_attribute[7]" id="attribute7">
                <option value="">Choose an Option...</option>
                <option value="8">Black</option>
                <option value="9">Red</option>
            </select>
        </dd>
        <dt>
            <label>Warehouse</label>
        </dt>
        <dd>
            <!--根据上面选择的属性值显示对应的仓库内容-->
        </dd>
    </dl>
    
    点赞 打赏 评论
  • 云海2013 2019-03-28 13:41

    知识考察点:遍历对象,遍历数组的用法

    案例:
    var A = {a:1,b:2,c:3,d:"hello world"};

    for(var k in A) {

    console.log(k,A[k]);

    }
    输出内容:
    a 1
    b 2
    c 3
    d hello world

    点赞 打赏 评论

相关推荐 更多相似问题