2016-02-29 4 views
-1

Я некоторые данные в формате JSON ниже,Заполнение JSON Array/Object

{ 
    "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" 
       } 
      ] 

     } 
    ] 
} 

Теперь мне нужна помощь в населенной этих данных в нужном формате, показывая на изображении ниже.

enter image description here

Объект JSON или массив допустим, но я нахожу, что это очень трудно заполнить данные, которые он имеет. Если мои данные JSON требуют изменений или данные могут быть упрощены, plz сделает это для меня. Более того, я хочу просто пропустить данные JSON и показать результат на веб-странице с помощью jQuery.

+1

У вас есть логика псевдо вниз, сделать попытку решения. Вы знаете, что вам нужно зациклиться на вышеуказанной структуре - так начните с этого! – tymeJV

+0

Спасибо за рекомендацию, ребята! –

ответ

0

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>

0

Обычно вам нужно попробовать сделать это самостоятельно, хотя я отвечаю на это. В будущем, пожалуйста, следуйте 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

+0

спасибо тонну приятеля! ты действительно спас меня! –

+0

Я рад слышать. Если да, пожалуйста, примите ответ, чтобы он помог другим людям. (Вы можете также возвысить :-)) –

Смежные вопросы