2013-06-26 32 views
-1

我有這個JSON數組有很多person數據每一個類型如"hr""accounting"分開一個JSON數組

JSON數組是這樣的:

{ 
    "0": { 
     "id": "2", 
     "name": "blabla", 
     "type": "hr" 
    }, 
    "1": { 
     "id": "3", 
     "name": "bub", 
     "type": "hr" 
    }, 
    "2": { 
     "id": "4", 
     "name": "ula", 
     "type": "accounting" 
    }, 
    "3": { 
     ... 
    } 
} 

我想在ul這樣來顯示它們:

<ul> 
    <li><p>hr</p>name: blabla<p></li> 
    <li><p>hr</p>name: bub<p></li> 
    <li><p>hr</p>......</li> 
</ul> 
<ul> 
    <li><p>accounting</p>name: ula<p></li> 
    <li><p>accounting</p>......</li> 
</ul> 

,但我不知道如何將JSON數組或如何分離正確地循環顯示它就像那樣。

+1

即不是數組...這是一個對象。 –

+1

你到目前爲止考慮/嘗試了什麼?你用什麼參考來理解Javascript? –

回答

2

試試這個用它爲每個部門:

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    </head> 
    <body> 
     <div class="container"></div> 
     <script> 
     var json={ 
      "0": { 
       "id": "2", 
       "name": "blabla", 
       "type": "hr" 
      }, 
      "1": { 
       "id": "3", 
       "name": "bub", 
       "type": "hr" 
      }, 
      "2": { 
       "id": "4", 
       "name": "ula", 
       "type": "accounting" 
      } 
     }; 

     var previous_type=json[0].type; 
     var _html="<ul>"; 

     $.each(json, function(index,key) { 
      if (previous_type!=key.type) { 
       _html+="</ul><ul>"; 
      } 
      previous_type=key.type; 
      _html+="<li><p>"+key.type+"</p><p>name: "+key.name+"</p></li>"; 
     }); 
     _html+="</ul>"; 
     $('.container').html(_html); 
     </script> 
    </body> 
</html> 

它爲每一個不同類型的新ul

container的輸出:

<div class="container"> 
    <ul> 
     <li> 
      <p>hr</p> 
      <p>name: blabla</p> 
     </li> 
     <li> 
      <p>hr</p> 
      <p>name: bub</p> 
     </li> 
    </ul> 
    <ul> 
     <li> 
      <p>accounting</p> 
      <p>name: ula</p> 
     </li> 
    </ul> 
</div> 
+0

感謝戴夫像一個魅力工作... 幾乎像我所擁有的,但我錯過了最重要的部分,如果循環... 都從我身上砰砰直跳 – Frank

2

這將基本上做你想要的一個部門。您可以通過在每個循環把一個如果然後再與value.type

var new_html = "<ul>"; 
$.each('name_of_json_array', function(key, value){ 
    new_html+="<li><p>"+value.type+"</p><p>name: "+value.name+"</p></li>"; 
}); 
new_html+="</ul>"; 
$('#some_container_element').append(new_html);