填充JSON陣列/對象

-1

{ 
    "cleaning" : [ 
     { 
      "MOPS" : [ 
       { 
        "id" : "123", 
        "name" : "best mops", 
        "price" : "123" 
       }, 
       { 
        "id" : "123", 
        "name" : "best mops", 
        "price" : "123" 
       }, 
       { 
        "id" : "123", 
        "name" : "best mops", 
        "price" : "123" 
       } 
      ], 

      "GlOVES" : [ 
       { 
        "id" : "123", 
        "name" : "best mops", 
        "price" : "123" 
       }, 
       { 
        "id" : "123", 
        "name" : "best mops", 
        "price" : "123" 
       }, 
       { 
        "id" : "123", 
        "name" : "best mops", 
        "price" : "123" 
       } 
      ], 

      "Another Items" : [ 
       { 
        "id" : "123", 
        "name" : "best mops", 
        "price" : "123" 
       }, 
       { 
        "id" : "123", 
        "name" : "best mops", 
        "price" : "123" 
       }, 
       { 
        "id" : "123", 
        "name" : "best mops", 
        "price" : "123" 
       } 
      ] 

     } 
    ] 
}

現在我需要在人口這個數據幫助中所需的格式下面的圖片中顯示。

的JSON對象或數組是有效的，但我發現很難來填充它的數據。如果我的JSON數據需要修改或者數據可以簡化，請爲我製作。此外，我只想循環瀏覽JSON數據，並使用jQuery在網頁上顯示結果。

來源

2016-02-29 Fazil Amir

你有僞邏輯下，使一個解決方案的嘗試。你知道你必須循環上述結構 - 所以從此開始！ – tymeJV

感謝您的推薦傢伙！ –

var data = { 
 
    "cleaning" : [ 
 
    { 
 
     "MOPS" : [ 
 
     { 
 
      "id" : "123", 
 
      "name" : "best mops", 
 
      "price" : "123" 
 
     }, 
 
     { 
 
      "id" : "123", 
 
      "name" : "best mops", 
 
      "price" : "123" 
 
     }, 
 
     { 
 
      "id" : "123", 
 
      "name" : "best mops", 
 
      "price" : "123" 
 
     } 
 
     ], 
 

 
     "GlOVES" : [ 
 
     { 
 
      "id" : "123", 
 
      "name" : "best mops", 
 
      "price" : "123" 
 
     }, 
 
     { 
 
      "id" : "123", 
 
      "name" : "best mops", 
 
      "price" : "123" 
 
     }, 
 
     { 
 
      "id" : "123", 
 
      "name" : "best mops", 
 
      "price" : "123" 
 
     } 
 
     ], 
 

 
     "Another Items" : [ 
 
     { 
 
      "id" : "123", 
 
      "name" : "best mops", 
 
      "price" : "123" 
 
     }, 
 
     { 
 
      "id" : "123", 
 
      "name" : "best mops", 
 
      "price" : "123" 
 
     }, 
 
     { 
 
      "id" : "123", 
 
      "name" : "best mops", 
 
      "price" : "123" 
 
     } 
 
     ] 
 
    } 
 
    ] 
 
} 
 

 
var result = $('#result'); 
 
var obj = data.cleaning[0]; 
 
for (var index in obj) { 
 
    var cat = $('<div class="cat"><h2>' + index + '</h2></div>').appendTo(result); 
 
    var items = obj[index]; 
 
    for (var i = 0; i < items.length; i++) { 
 
    $('<div>' + items[i].name + '</div>').appendTo(cat); 
 
    } 
 
}

body { 
 
    text-align:center; 
 
} 
 

 
h2 { 
 
    margin:0; 
 
} 
 

 
.cat { 
 
    border:1px solid #000; 
 
    display:inline-block; 
 
    margin-right:10px; 
 
    padding:10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="result"></div>

來源

2016-03-01 03:27:19

通常，即使我回答了這個問題，你也需要自己嘗試。將來，請按照guidelines。

var data = { 
 
    "cleaning" : [ 
 
    { 
 
     "MOPS" : [ 
 
     { 
 
      "id" : "123", 
 
      "name" : "best mops", 
 
      "price" : "123" 
 
     }, 
 
     { 
 
      "id" : "123", 
 
      "name" : "best mops", 
 
      "price" : "123" 
 
     }, 
 
     { 
 
      "id" : "123", 
 
      "name" : "best mops", 
 
      "price" : "123" 
 
     } 
 
     ], 
 

 
     "GlOVES" : [ 
 
     { 
 
      "id" : "123", 
 
      "name" : "best mops", 
 
      "price" : "123" 
 
     }, 
 
     { 
 
      "id" : "123", 
 
      "name" : "best mops", 
 
      "price" : "123" 
 
     }, 
 
     { 
 
      "id" : "123", 
 
      "name" : "best mops", 
 
      "price" : "123" 
 
     } 
 
     ], 
 

 
     "Another Items" : [ 
 
     { 
 
      "id" : "123", 
 
      "name" : "best mops", 
 
      "price" : "123" 
 
     }, 
 
     { 
 
      "id" : "123", 
 
      "name" : "best mops", 
 
      "price" : "123" 
 
     }, 
 
     { 
 
      "id" : "123", 
 
      "name" : "best mops", 
 
      "price" : "123" 
 
     } 
 
     ] 
 
    } 
 
    ] 
 
} 
 

 
var result = $('#result'); 
 
var obj = data.cleaning[0]; 
 
for (var index in obj) { 
 
    var cat = $('<div class="cat"><h2>' + index + '</h2></div>').appendTo(result); 
 
    var items = obj[index]; 
 
    for (var i = 0; i < items.length; i++) { 
 
    $('<div>' + items[i].name + '</div>').appendTo(cat); 
 
    } 
 
}

body { 
 
    text-align:center; 
 
} 
 

 
h2 { 
 
    margin:0; 
 
} 
 

 
.cat { 
 
    border:1px solid #000; 
 
    display:inline-block; 
 
    margin-right:10px; 
 
    padding:10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="result"></div>

http://jsbin.com/mutela/edit?html,js

來源

2016-02-29 13:04:44

謝謝你的哥們！你真的救了我！ –

我很高興聽到。如果是這樣，請接受答案，這樣可以幫助其他人。（你也可以加註:-)） –

填充JSON陣列/對象

回答

相關問題