javascript - 遍历对象并返回匹配的键/值

Question

我有一系列包含产品信息的对象，我需要使用它们来过滤可用的产品选项。 (即客户选择值选项 ID 为 25 的单选按钮，我需要根据 ID 25 的可用内容过滤其他两个选项，然后从配置 (25/1/13) 中获取该三部分组合的值并找到该组合在 siblings 中返回 sku 值 (25/1/13 = 1761)。

我已成功获取键和值但不匹配。我完全不熟悉 javascript(我的大部分经验只是用 jQuery 制作动画)所以我不确定到目前为止我写了什么有值(value)的东西。

这是我从编码的 JSON 中得到的( trim 后的 b/c 数据量很大，因此格式可能不准确)。我无法控制 JSON 的格式和结构。

  var configurations = {
        "lens_types":{
                "25":{
                      "1":1,
                      "2":2,
                      "4":4,
                      "3":3}},
            "lenses":{
                "25":{
                      "1":{
                            "2":2,
                            "4":4,
                            "5":5,
                            "6":6,
                            "9":9,
                            "13":13},
                       "2":{
                            "4":4,
                            "5":5,
                            "6":6,
                            "13":13}}}
  var siblings = { 
            "25":{
                  "1":{
                       "2":1744,
                       "4":1745,
                       "5":1747},
                       "6":1749,
                       "9":1752,
                       "13":1761},
                   "2":{
                       "4":1746,
                       "5":1748,
                       "6":1750,
                       "13":1762},
                   "4":{ 
                       "1":1753,
                       "3":1756,
                       "8":1759},
                   "3":{
                       "2":1754,
                       "3":1755,
                       "8":1757,
                       "9":1758,
                       "12":1760}}}

这是产品形式的通用结构:

    <form method="post" action="" name="product_details">
        <div id="frame_style">          
            <input type="radio" name="frame_style" value="1" />
            <input type="radio" name="frame_style" value="3" />
            <input type="radio" name="frame_style" value="11" />
            <input type="radio" name="frame_style" value="24" />
            <input type="radio" name="frame_style" value="25" />
            <input type="radio" name="frame_style" value="27" />
            <input type="radio" name="frame_style" value="2" />
            <input type="radio" name="frame_style" value="8" />
            <input type="radio" name="frame_style" value="45" />
            <input type="radio" name="frame_style" value="77" />
            <input type="radio" name="frame_style" value="89" />
            <input type="radio" name="frame_style" value="13" />
        </div>
        <div id="lens_type">            
            <input type="radio" name="lens_type" value="1" />
            <input type="radio" name="lens_type" value="2" />
            <input type="radio" name="lens_type" value="3" />
            <input type="radio" name="lens_type" value="4" />
        </div>
        <div id="lens_style">           
            <input type="radio" name="lens_style" value="1" />
            <input type="radio" name="lens_style" value="2" />
            <input type="radio" name="lens_style" value="3" />
            <input type="radio" name="lens_style" value="4" />
            <input type="radio" name="lens_style" value="5" />
            <input type="radio" name="lens_style" value="8" />
            <input type="radio" name="lens_style" value="9" />
            <input type="radio" name="lens_style" value="12" />
        </div>
    </form> 

有什么想法吗？谢谢!!

编辑

这是两者的完整对象:

    var configurations = {"lens_types":{"25":{"1":1,"2":2,"4":4,"3":3},"1":{"1":1,"2":2,"4":4,"3":3},"15":{"1":1,"2":2,"3":3},"26":{"1":1,"2":2,"3":3},"24":{"1":1,"2":2,"4":4,"3":3},"27":{"1":1,"2":2,"4":4,"3":3},"11":{"1":1,"2":2,"4":4,"3":3},"3":{"1":1,"2":2,"4":4,"3":3}}, "lenses":{"25":{"1":{"2":2,"4":4,"5":5,"6":6,"9":9,"13":13},"2":{"4":4,"5":5,"6":6,"13":13},"4":{"1":1,"3":3,"8":8},"3":{"2":2,"3":3,"8":8,"9":9,"12":12}},"1":{"1":{"2":2,"4":4,"5":5,"6":6,"9":9,"13":13},"2":{"4":4,"5":5,"6":6,"13":13},"4":{"1":1,"3":3,"8":8},"3":{"2":2,"3":3,"8":8,"9":9,"12":12}},"15":{"1":{"2":2,"4":4,"5":5,"6":6,"9":9,"13":13},"2":{"4":4,"5":5,"6":6,"13":13},"3":{"2":2,"3":3,"8":8,"9":9}},"26":{"1":{"2":2,"4":4,"5":5,"6":6,"9":9,"13":13},"2":{"4":4,"5":5,"6":6,"13":13},"3":{"2":2,"3":3,"8":8,"9":9}},"24":{"1":{"2":2,"4":4,"5":5,"6":6,"9":9,"13":13},"2":{"4":4,"5":5,"6":6,"13":13},"4":{"1":1,"3":3,"8":8},"3":{"2":2,"3":3,"8":8,"9":9,"12":12}},"27":{"1":{"2":2,"4":4,"5":5,"6":6,"9":9,"13":13},"2":{"4":4,"5":5,"6":6,"13":13},"4":{"1":1,"3":3,"8":8},"3":{"2":2,"3":3,"8":8,"9":9,"12":12}},"11":{"1":{"2":2,"4":4,"5":5,"6":6,"9":9,"13":13},"2":{"4":4,"5":5,"6":6,"13":13},"4":{"1":1,"3":3,"8":8},"3":{"2":2,"3":3,"8":8,"9":9,"12":12}},"3":{"1":{"2":2,"4":4,"5":5,"9":9},"2":{"4":4,"5":5,"6":6},"4":{"1":1,"3":3,"8":8},"3":{"2":2,"3":3,"8":8,"9":9,"12":12}}}}

    var siblings = {"25":{"1":{"2":1744,"4":1745,"5":1747,"6":1749,"9":1752,"13":1761},"2":{"4":1746,"5":1748,"6":1750,"13":1762},"4":{"1":1753,"3":1756,"8":1759},"3":{"2":1754,"3":1755,"8":1757,"9":1758,"12":1760}},"1":{"1":{"2":1769,"4":1770,"5":1772,"6":1774,"9":1777,"13":1786},"2":{"4":1771,"5":1773,"6":1775,"13":1787},"4":{"1":1778,"3":1781,"8":1784},"3":{"2":1779,"3":1780,"8":1782,"9":1783,"12":1785}},"15":{"1":{"2":1794,"4":1795,"5":1797,"6":1799,"9":1802,"13":1807},"2":{"4":1796,"5":1798,"6":1800,"13":1808},"3":{"2":1803,"3":1804,"8":1805,"9":1806}},"26":{"1":{"2":1809,"4":1810,"5":1812,"6":1814,"9":1817,"13":1822},"2":{"4":1811,"5":1813,"6":1815,"13":1823},"3":{"2":1818,"3":1819,"8":1820,"9":1821}},"24":{"1":{"2":1824,"4":1825,"5":1827,"6":1829,"9":1832,"13":1841},"2":{"4":1826,"5":1828,"6":1830,"13":1842},"4":{"1":1833,"3":1836,"8":1839},"3":{"2":1834,"3":1835,"8":1837,"9":1838,"12":1840}},"27":{"1":{"2":1843,"4":1844,"5":1846,"6":1848,"9":1851,"13":1860},"2":{"4":1845,"5":1847,"6":1849,"13":1861},"4":{"1":1852,"3":1855,"8":1858},"3":{"2":1853,"3":1854,"8":1856,"9":1857,"12":1859}},"11":{"1":{"2":1862,"4":1863,"5":1865,"6":1867,"9":1870,"13":1879},"2":{"4":1864,"5":1866,"6":1868,"13":1880},"4":{"1":1871,"3":1874,"8":1877},"3":{"2":1872,"3":1873,"8":1875,"9":1876,"12":1878}},"3":{"1":{"2":1881,"4":1882,"5":1884,"9":1888},"2":{"4":1883,"5":1885,"6":1886},"4":{"1":1889,"3":1892,"8":1895},"3":{"2":1890,"3":1891,"8":1893,"9":1894,"12":1896}}}

Answer 1

你可以这样做:

$('#frame_style input:radio').click(function(){
    var val = $(this).val();
    for ( var ind in configurations['lenses'][val]){
       var input = '<input type="radio" name="lens_type" value="'+ind+'" >'+ind;
       $('#lens_type').append(input);
    }
});

$('#lens_type input:radio').live('click', function(){
    var frame = $('#frame_style input:radio:checked').val();
    var val = $(this).val();
    for ( var ind in configurations['lenses'][frame][val]){
               var input = '<input type="radio" name="lens_style" value="'+ind+'" >'+ind;
       $('#lens_style').append(input);
    }
});

$('#lens_style input:radio').live('click', function(){
    var frame = $('#frame_style input:radio:checked').val();
    var type = $('#lens_type input:radio:checked').val();
    var style = $(this).val()
        alert('Sku is:'+siblings[frame][type][style]);
});

想法是在用户选择第一个级别后创建 radio 。当然这是非常基本的，你可以试试这个 fiddle :http://jsfiddle.net/LL3SM/并选择 25、1、2，您将收到带有 sku 的警报