2013-05-21 2 views
0

나는 json 문자열이 있습니다.그룹과 mootools json 필터

var data= [{"name":"Name1","value":"Value1","group":"Group1","order":"1"}, 
     {"name":"Name2","value":"Value2","group":"Group1","order":"2"}, 
     {"name":"Name3","value":"Value3","group":"Group1","order":"3"}, 
     {"name":"Name4","value":"Value4","group":"Group2","order":"4"}, 
     {"name":"Name5","value":"Value5","group":"Group2","order":"5"}, 
     {"name":"Name6","value":"Value6","group":"Group3","order":"6"}, 
     {"name":"Name7","value":"Value7","group":"Group4","order":"7"}, 
     {"name":"Name8","value":"Value8","group":"Group4","order":"8"}, 
     {"name":"Name9","value":"Value9","group":"Group4","order":"9"}] 

이 순서로 정렬과 자바 스크립트 라이브러리 Mootools의를 사용하여 HTML 출력에이 변환 할 수 있습니다 : : 것 같습니다

<h2>Group1</h2> 
<div>Name1 ... Value1</div> 
<div>Name2 ... Value2</div> 
<div>Name3 ... Value3</div> 
<h2>Group2</h2> 
<div>Name4 ... Value4</div> 
<div>Name5 ... Value5</div> 
<h2>Group3</h2> 
<div>Name6 ... Value6</div> 
<h2>Group4</h2> 
<div>Name7 ... Value7</div> 
<div>Name8 ... Value8</div> 
<div>Name9 ... Value9</div> 

이 내 정렬 기능 :

data.sort(function(a,b){ 
    return parseInt(a.order) > parseInt(b.order); 
}); 

내 렌더링 기능은 다음과 같습니다.

var html_data = ''; 
data.each(function(d){  
     html_data += tmpl.render("data", d);    
}); 

container.set('html', html_data); 

하지만 그룹화하는 방법을 모르겠습니다.

감사합니다. 각 루프에서 이전 값에 대한

+0

이 예는 수 있습니다. 그것도 어렵지 않다. 당신은 가서 코드를 게시해야합니다. 그러면 ppl이 당신을 도울 수 있습니다. 당신의 응답 (.each, .map, .every 등)을 걷기위한 Array 메소드에 대한 mootools API를보고, 객체를 템플릿 화하고 출력하기위한 String.prototype.substitute를 말하십시오. 또한 parseInt를 사용할 때 기수를 사용하거나 대신 mootools의 toInt()를 사용하십시오. 당신의 정렬은'group'으로 그룹화 할 필요가 있기 때문에 좋지 않습니다. 그리고 순서는 지역적 일 수 있습니다.하지만 모든 그룹을 추출하고 제목을 만든 다음, 일치하는 것을 발견 할 때 그 아래에 주입하여 개별적으로 해결할 수 있습니다. –

답변

1

그냥 검사 그룹 :

var html_data = ''; 
var group = ''; 
data.each(function(item, index) { 
    if (group !== item.group) { 
     html_data += '<h2>'+item.group+'</h2>'; 
    } 
    html_data += '<div>'+item.name+'...'+item.value+'</div>'; 
    group = item.group; 
}); 

container.set('html', html_data); 
+0

감사! 훌륭한 해결책. – user889349