填充JSON数组/对象

Question

我下面有一些JSON数据，

{
    "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在网页上显示结果。

Answer 1

通常，即使我回答这个问题，你也需要自己尝试。将来，请关注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

Answer 2

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>