如何在jqGrid中獲取JSON三級深層數據？

Question

我正在從一個網站

{ 
    "HotelListResponse": { 
     "customerSessionId": "0ABAAA7A-90C9-7491-3FF2-7E2C37496CA2", 
     "numberOfRoomsRequested": 1, 
     "moreResultsAvailable": true, 
     "cacheKey": "7790c974:13ff7e2c374:6ccd", 
     "cacheLocation": "10.186.170.122:7300", 
     "HotelList": { 
      "@activePropertyCount": "223", 
      "@size": "1", 
      "HotelSummary": { 
       "@order": "0", 
       "hotelId": 125727, 
       "name": "Red Lion Hotel on Fifth Avenue", 
       "address1": "1415 5th Ave", 
       "city": "Seattle", 
       "stateProvinceCode": "WA", 
       "postalCode": 98101, 
       "countryCode": "US", 
       "airportCode": "SEA", 
       "supplierType": "E", 
       "propertyCategory": 1, 
       "hotelRating": 3.5, 
       "confidenceRating": 90, 
       "amenityMask": 7847938, 
       "tripAdvisorRating": 4, 
       "locationDescription": "Near Pike Place Market", 
       "shortDescription": "<p><b>Location. </b> <br />Red Lion Hotel on Fifth Avenue is located close to 5th Avenue Theater, Pike Place Market, and Washington State Convention & Trade Center. Additional points of interest", 
       "highRate": 149, 
       "lowRate": 126.65, 
       "rateCurrencyCode": "USD", 
       "latitude": 47.60985, 
       "longitude": -122.33475, 
       "proximityDistance": 11.168453, 
       "proximityUnit": "MI", 
       "hotelInDestination": true, 
       "thumbNailUrl": "/hotels/1000000/60000/51000/50947/50947_180_t.jpg", 
       "deepLink": "http://travel.ian.com/index.jsp?pageName=hotAvail&cid=55505&hotelID=125727&mode=2&numberOfRooms=1&room-0-adult-total=2&room-0-child-total=0&arrivalMonth=8&arrivalDay=4&departureMonth=8&departureDay=5&showInfo=true&locale=en_US&currencyCode=USD", 
       "RoomRateDetailsList": { 
        "RoomRateDetails": { 
         "roomTypeCode": 253461, 
         "rateCode": 201054304, 
         "maxRoomOccupancy": 2, 
         "quotedRoomOccupancy": 2, 
         "minGuestAge": 0, 
         "roomDescription": "Classic Single Queen", 
         "promoId": 202161947, 
         "promoDescription": "Summer Sale! Save 15%", 
         "currentAllotment": 0, 
         "propertyAvailable": true, 
         "propertyRestricted": false, 
         "expediaPropertyId": 50947, 
         "rateKey": "0ABAAA7A-90C9-7491-3FF2-7E2C37496CCE", 
         "RateInfo": { 
          "@rateChange": "false", 
          "@promo": "true", 
          "@priceBreakdown": "true", 
          "ChargeableRateInfo": { 
           "@total": "151.23", 
           "@surchargeTotal": "24.58", 
           "@nightlyRateTotal": "126.65", 
           "@maxNightlyRate": "126.65", 
           "@currencyCode": "USD", 
           "@commissionableUsdTotal": "126.65", 
           "@averageRate": "126.65", 
           "@averageBaseRate": "149.0", 
           "NightlyRatesPerRoom": { 
            "@size": "1", 
            "NightlyRate": { 
             "@promo": "true", 
             "@rate": "126.65", 
             "@baseRate": "149.0" 
            } 
           }, 
           "Surcharges": { 
            "@size": "1", 
            "Surcharge": { 
             "@amount": "24.58", 
             "@type": "TaxAndServiceFee" 
            } 
           } 
          } 
         }, 
         "ValueAdds": { 
          "@size": "1", 
          "ValueAdd": { 
           "@id": "2048", 
           "description": "Free Wireless Internet" 
          } 
         } 
        } 
       } 
      } 
     } 
    } 
} 

此JSON響應和我想只有3級深田養活的jqGrid（下「HotelSummary」）一樣hotelId，名稱或地址1。 我該怎麼做？

Answer 1

只要它是一個JSON對象，你可以使用點符號，如果它是一個字符串不是一個對象，那麼你需要使用JSON.parse（）來（大多數新的瀏覽器接受）來解析

response.HotelListResponse.HotelList.HotelSummary 

小提琴：http://jsfiddle.net/EaWJY/

更新：

我用這個生成從JSON數據提供一個行：

$(document).ready(function() { 
    jQuery("#list4").jqGrid({ 
     datatype : "local", 
     height : 250, 
     colNames : ['ID', 'Hotel ID', 'Name', 'Address 1'], 
     colModel : [{ 
       name : 'id', 
       index : 'id', 
       width : 60, 
       sorttype : "int" 
      }, { 
       name : 'hotelId', 
       index : 'hotelId', 
       width : 60, 
       sorttype : "int" 
      }, { 
       name : 'name', 
       index : 'name', 
       width : 100 
      }, { 
       name : 'address1', 
       index : 'address1', 
       width : 100 
      } 
     ], 
     multiselect : true, 
     caption : "Hotel Data" 
    }); 

    var response = { 
     "HotelListResponse" : { 
      "customerSessionId" : "0ABAAA7A-90C9-7491-3FF2-7E2C37496CA2", 
      "numberOfRoomsRequested" : 1, 
      "moreResultsAvailable" : true, 
      "cacheKey" : "7790c974:13ff7e2c374:6ccd", 
      "cacheLocation" : "10.186.170.122:7300", 
      "HotelList" : { 
       "@activePropertyCount" : "223", 
       "@size" : "1", 
       "HotelSummary" : { 
        "@order" : "0", 
        "hotelId" : 125727, 
        "name" : "Red Lion Hotel on Fifth Avenue", 
        "address1" : "1415 5th Ave", 
        "city" : "Seattle", 
        "stateProvinceCode" : "WA", 
        "postalCode" : 98101, 
        "countryCode" : "US", 
        "airportCode" : "SEA", 
        "supplierType" : "E", 
        "hotelRating" : 3.5, 
        "propertyCategory" : 1, 
        "confidenceRating" : 90, 
        "amenityMask" : 7847938, 
        "tripAdvisorRating" : 4, 
        "locationDescription" : "Near Pike Place Market", 
        "shortDescription" : "<p><b>Location. </b> <br />Red Lion Hotel on Fifth Avenue is located close to 5th Avenue Theater, Pike Place Market, and Washington State Convention & Trade Center. Additional points of interest", 
        "highRate" : 149, 
        "lowRate" : 126.65, 
        "rateCurrencyCode" : "USD", 
        "latitude" : 47.60985, 
        "longitude" : -122.33475, 
        "proximityDistance" : 11.168453, 
        "proximityUnit" : "MI", 
        "hotelInDestination" : true, 
        "thumbNailUrl" : "/hotels/1000000/60000/51000/50947/50947_180_t.jpg", 
        "deepLink" : "http://travel.ian.com/index.jsp?pageName=hotAvail&cid=55505&hotelID=125727&mode=2&numberOfRooms=1&room-0-adult-total=2&room-0-child-total=0&arrivalMonth=8&arrivalDay=4&departureMonth=8&departureDay=5&showInfo=true&locale=en_US&currencyCode=USD", 
        "RoomRateDetailsList" : { 
         "RoomRateDetails" : { 
          "roomTypeCode" : 253461, 
          "rateCode" : 201054304, 
          "maxRoomOccupancy" : 2, 
          "quotedRoomOccupancy" : 2, 
          "minGuestAge" : 0, 
          "roomDescription" : "Classic Single Queen", 
          "promoId" : 202161947, 
          "promoDescription" : "Summer Sale! Save 15%", 
          "currentAllotment" : 0, 
          "propertyAvailable" : true, 
          "propertyRestricted" : false, 
          "expediaPropertyId" : 50947, 
          "rateKey" : "0ABAAA7A-90C9-7491-3FF2-7E2C37496CCE", 
          "RateInfo" : { 
           "@rateChange" : "false", 
           "@promo" : "true", 
           "@priceBreakdown" : "true", 
           "ChargeableRateInfo" : { 
            "@total" : "151.23", 
            "@surchargeTotal" : "24.58", 
            "@nightlyRateTotal" : "126.65", 
            "@maxNightlyRate" : "126.65", 
            "@currencyCode" : "USD", 
            "@commissionableUsdTotal" : "126.65", 
            "@averageRate" : "126.65", 
            "@averageBaseRate" : "149.0", 
            "NightlyRatesPerRoom" : { 
             "@size" : "1", 
             "NightlyRate" : { 
              "@promo" : "true", 
              "@rate" : "126.65", 
              "@baseRate" : "149.0" 
             } 
            }, 
            "Surcharges" : { 
             "@size" : "1", 
             "Surcharge" : { 
              "@amount" : "24.58", 
              "@type" : "TaxAndServiceFee" 
             } 
            } 
           } 
          }, 
          "ValueAdds" : { 
           "@size" : "1", 
           "ValueAdd" : { 
            "@id" : "2048", 
            "description" : "Free Wireless Internet" 
           } 
          } 
         } 
        } 
       } 
      } 
     } 
    }; 
    var rows = jQuery('#list4').jqGrid('getGridParam', 'records'); 

    var hotelInfo = response.HotelListResponse.HotelList.HotelSummary; 
    var rowData = {}; 
    rowData.id = rows + 1; 
    rowData.hotelId = hotelInfo.hotelId; 
    rowData.name = hotelInfo.name; 
    rowData.address1 = hotelInfo.address1; 

    jQuery("#list4").jqGrid('addRowData', rows + 1, rowData); 
});