填充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阵列/对象

回答

相关问题