2011-02-03 4 views
0

다음 두 블록을 설계하는 중입니다. - 데이터베이스에서 특정 데이터를 검색하여 json 형식으로 호출자에게 반환하는 웹 서비스 (안정된 웹 서비스). - 웹 서비스에서 제공하는 json 데이터를 사용하는 웹 GUI 응용 프로그램 (호출자)입니다.JSON 데이터 형식화

웹 GUI 응용 프로그램의보기 중 하나에는 웹 서비스에서 수신 한 json 응답을 시각화하는 간단한 표가 포함되어 있습니다. 내가 뭘하고 싶은데요? 셀 데이터에 따라 테이블의 특정 셀을 포맷하는 것입니다. 예를 들어 값이 < 인 셀에는 빨간색 배경이 있습니다.

형식 정보가 웹 GUI에 없지만 웹 서비스에서도 제공 될 수 있으면 좋을 것입니다. json 출력에 함수 정보를 포함 할 수 있습니까? 내 목표를 달성하기위한 다른 아이디어?

감사합니다.

+0

pre 태그에 표시/dist/ – Mohsen

답변

1

올바르게 읽는다면 스타일 정보를 JSON에 추가하고이를 TD로 바로 밀어 넣을 수 있습니다.

은 JSON 현재

[{'someFieldName':'aaa','someOtherFieldName':3}, {'someFieldName':'bbb','someOtherFieldName':5}] 

같이 보입니다 그리고 그

<table> 
    <tr> 
     <th>someFieldName</th> 
     <th>someOtherFieldName</th> 
    </tr> 
    <tr> 
     <td>aaa</td> 
     <td>3</td> 
    </tr> 
    <tr> 
     <td>bbb</td> 
     <td>5</td> 
    </tr> 
</table> 

이 웹 서비스는 JSON에 원하는 스타일 정보를 추가하고 단지 TD에 팝업 가지고

같은 것을 만든 상상 :

[{'someFieldName':'aaa','someOtherFieldName':3,'cssClass':'redCell'}, {'someFieldName':'bbb','someOtherFieldName':5,'cssClass':'blueCell'}] 

... 
<td class='redCell'>3</td> 
... 
<td class='blueCell'>5</td> 

또는 각 속성에 cssClass를 추가하십시오. y를 각각 독립적으로 지정해야하는 경우

[{'someFieldName':{'value':'aaa','cssClass':'class-a'},'someOtherFieldName':{'value':3,'cssClass':'redCell'}},{'someFieldName':{'value':'bbb','cssClass':'class-b'},'someOtherFieldName':{'value':5,'cssClass':'blueCell'}}] 
... 
<td class='class-a'>aaa</td> 
<td class='redCell'>3</td> 
... 
<td class='class-b'>bbb</td> 
<td class='blueCell'>5</td> 
+1

또는 '{'someFieldName ': {'값 ':'aaa ','cssClass ':'클래스 -a '},'someOtherFieldName ': {'값 ': 3,'cssClass ':'redCell ' }}, { 'someFieldName': { '값': 'bbb', 'cssClass': ' object 클래스에서 한 번 정의하는 대신 각 속성에 대해 cssClass를 지정할 수 있습니다. 독특한 스타일을 지정하기 위해 실제로 필요한 속성의 수에 따라 다릅니다. –

+0

그건 합리적인 일로 보입니다. 그래서, 나는 json을 통해 자바 스크립트 함수를 전달하고 클라이언트 측에서 결과를 평가하는 것이 적절하지 않다고 생각합니다. – Stathis

1

HTML 테이블에서 JSON 데이터를 나타 내기 위해 jQuery 플러그인을 개발했습니다. 그것은 당신이하고있는 일을위한 틀로서 당신을 잘 섬길 것입니다. GitHub https://github.com/anuary/jquery-json-to-table에서 포크하십시오.

enter image description here

누락 된 부분을 추가하는 것은 어렵지 않을 것이다. 스크립트는 이미 (테이블 행에 클래스를 할당하여) 데이터 유형을 제안합니다. 또한 전체 트리를 한 번에 표시하지 않고 데이터를 검색 할 수 있습니다.

0

시도 JSON.stringify.

var jsonObject = { foo: "sample", bar: "sample" }; 
JSON.stringify(jsonObject, null, 4) 

지금은이 문제 http://mohsenweb.com/json-formatter의 각도 지시를했습니다

사용 AngularJS와

function json($scope) { 
 

 
    $scope.jsonObject = { 
 
    foo: "sample", 
 
    bar: "sample" 
 
    }; 
 
    $scope.jsonObjectFormatted = JSON.stringify($scope.jsonObject, null, 4); 
 
}
<html ng-app> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-controller="json"> 
 
    <pre>{{jsonObject}}</pre> 
 
    <pre>{{jsonObjectFormatted}}</pre> 
 
</div> 
 

 
</html>