首頁(yè) 猿問(wèn) js遍歷json根據(jù)id選擇屬性值...

js遍歷json根據(jù)id選擇屬性值顯示對(duì)應(yīng)的div？

JavaScript

猛跑小豬 2019-04-27 19:15:35

有3個(gè)json，它們之間可以找到相同的id，我想要的是選擇了屬性1下面的屬性值，然后再選擇屬性2下面的屬性值（屬性1是必有的，但是屬性2可能有的情況下沒(méi)有），請(qǐng)問(wèn)我該怎么寫js可以實(shí)現(xiàn)？//屬性1var 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",}//屬性2var arr2 = {"7":{"8":["4"],"9":["10"]},"1":{"2":["4","5"],"3":["6"]}}//倉(cāng)庫(kù)var arr3={"4":{"qty":"5","html":"Warehouse1”},"5":{"qty":"6","html":"Warehouse2"},"6":{"qty":"22","html":"Warehouse3"},"10":{"qty":"13","html":"Warehouse4"}}

查看完整描述

3 回答

慕碼人2483693

TA貢獻(xiàn)1860條經(jīng)驗(yàn) 獲得超9個(gè)贊

建議使用markdown語(yǔ)法格式化一下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"
        ]
    }
}
//倉(cāng)庫(kù)
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>
        <!--根據(jù)上面選擇的屬性值顯示對(duì)應(yīng)的倉(cāng)庫(kù)內(nèi)容-->
    </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>
        <!--根據(jù)上面選擇的屬性值顯示對(duì)應(yīng)的倉(cāng)庫(kù)內(nèi)容-->
    </dd>
</dl>

反對(duì) 回復(fù) 2019-05-08