2016-09-17 93 views
0

我已經創建了一個json,我必須通過循環顯示在服務器上。我在該建築物下有一些建築物數據,其中有一些樓層,下面是一些房間,下面是一些房間。 我必須使用循環在網頁上顯示它。如何使用jQuery通過循環顯示網頁上的json數據?

{ 
    "property_data": [{ 
      "building_id": "b001", 
      "building_title": "B1", 
      "building_project": "A", 
      "building_address": "Beside Fathima School, Keshwapur", 
      "building_stats": { 
       "floors": 7, 
       "house": 35, 
       "rooms": 85, 
       "beds": 155 
      }, 
      "floors": [{ 
        "floors_id": "b1-f1", 
        "floors_title": "Floor I", 
        "parent_id": "building_id", 
        "floor_stats": { 
         "house": 5, 
         "rooms": 20, 
         "beds": 40 
        }, 
        "houses": [{ 
          "house_id": "b1-f1-h1", 
          "house_name": "H1", 
          "house_photos": [], 
          "parent_id": "property_group_id", 
          "house_stats": { 
           "rooms": 4, 
           "beds": 7 
          }, 
          "rooms": [{ 
            "room_id": "b1-f1-h1-r1", 
            "room_no": "R1", 
            "parent_id": "house_id", 
            "room_photos": [], 
            "room_stats": { 
             "beds": 2 
            }, 
            "beds": [{ 
              "bed_id": "b1-f1-h1-r1-b1", 
              "bed_name": "B1" 
             }, 
             { 
              "bed_id": "b1-f1-h1-r1-b2", 
              "bed_name": "B2" 
             }] 
           }, 
           { 
            "room_id": "b1-f1-h1-r2", 
            "room_name": "R2", 
            "bed": [] 
           }] 
         }, 
         { 
          "house_id": "b1-f1-h2", 
          "house_name": "H2", 
          "room": [] 
         } 
        ] 
       }, 
       { 
        "floors_id": "b1-f2", 
        "floors_title": "Floor II", 
        "parent_id": "building_id", 
        "floor_stats": { 
         "house": 5, 
         "rooms": 20, 
         "beds": 40 
        }, 
        "houses": [{ 
          "house_id": "b1-f2-h1", 
          "house_name": "H1", 
          "house_photos": [], 
          "parent_id": "property_group_id", 
          "house_stats": { 
           "rooms": 4, 
           "beds": 7 
          }, 
          "rooms": [{ 
            "room_id": "b1-f2-h1-r1", 
            "room_no": "R1", 
            "parent_id": "house_id", 
            "room_photos": [], 
            "room_stats": { 
             "beds": 2 
            }, 
            "beds": [{ 
              "bed_id": "b1-f2-h1-r1-b1", 
              "bed_name": "B1" 
             }, 
             { 
              "bed_id": "b1-f2-h1-r1-b2", 
              "bed_name": "B2" 
             }] 
           }, 
           { 
            "room_id": "b1-f2-h1-r2", 
            "room_name": "R2", 
            "bed": [] 
           }] 
         }, 
         { 
          "house_id": "b1-f2-h2", 
          "house_name": "H2", 
          "room": [] 
         } 
        ] 
       } 
      ] 
     }, 
     { 
      "building_id": "b002", 
      "building_title": "B2", 
      "building_project": "Shanders Properties", 
      "building_address": "Beside Airport, Gokul Road ", 
      "building_stats": { 
       "floors": 5, 
       "house": 33, 
       "rooms": 75, 
       "beds": 145 
      }, 
      "floors": [{ 
        "floors_id": "b2-f1", 
        "floors_title": "Floor I", 
        "parent_id": "building_id", 
        "floor_stats": { 
         "house": 5, 
         "rooms": 20, 
         "beds": 40 
        }, 
        "houses": [{ 
          "house_id": "b2-f1-h1", 
          "house_name": "H1", 
          "house_photos": [], 
          "parent_id": "property_group_id", 
          "house_stats": { 
           "rooms": 4, 
           "beds": 7 
          }, 
          "rooms": [{ 
            "room_id": "b2-f1-h1-r1", 
            "room_no": "R1", 
            "parent_id": "house_id", 
            "room_photos": [], 
            "room_stats": { 
             "beds": 2 
            }, 
            "beds": [{ 
              "bed_id": "b2-f1-h1-r1-b1", 
              "bed_name": "B1" 
             }, 
             { 
              "bed_id": "b2-f1-h1-r1-b2", 
              "bed_name": "B2" 
             }] 
           }, 
           { 
            "room_id": "b2-f1-h1-r2", 
            "room_name": "R2", 
            "bed": [] 
           }] 
         }, 
         { 
          "house_id": "b2-f1-h2", 
          "house_name": "H2", 
          "room": [] 
         } 
        ] 
       }, 
       { 
        "floors_id": "b2-f2", 
        "floors_title": "Floor II", 
        "parent_id": "building_id", 
        "floor_stats": { 
         "house": 5, 
         "rooms": 20, 
         "beds": 40 
        }, 
        "houses": [{ 
          "house_id": "b2-f2-h1", 
          "house_name": "H1", 
          "house_photos": [], 
          "parent_id": "property_group_id", 
          "house_stats": { 
           "rooms": 4, 
           "beds": 7 
          }, 
          "rooms": [{ 
            "room_id": "b2-f2-h1-r1", 
            "room_no": "R1", 
            "parent_id": "house_id", 
            "room_photos": [], 
            "room_stats": { 
             "beds": 2 
            }, 
            "beds": [{ 
              "bed_id": "b2-f2-h1-r1-b1", 
              "bed_name": "B1" 
             }, 
             { 
              "bed_id": "b2-f2-h1-r1-b2", 
              "bed_name": "B2" 
             }] 
           }, 
           { 
            "room_id": "b2-f2-h1-r2", 
            "room_name": "R2", 
            "bed": [] 
           }] 
         }, 
         { 
          "house_id": "b2-f2-h2", 
          "house_name": "H2", 
          "room": [] 
         } 
        ] 
       } 

      ] 
     } 
    ] 
} 
+1

此Stackoverflow可能會幫助您解決問題 http://stackoverflow.com/questions/2958841/how-to-loop-a-key-value-對象中的JavaScript –

回答

0

我希望你能在@mwisnicki編輯後應用循環。 任何方式適當的JSON結構嘗試http://jsonviewer.stack.hu/ 在這裏,您可以查看JSON數據。

對於數組對象[],檢查長度和循環限制爲[] legnth。 對於{},使用其名稱直接獲取該對象的值