Форматирование данных JSON

Question

Я нахожусь в процессе проектирования следующих двух блоков: - веб-сервис (restful), который извлекает определенные данные из базы данных и возвращает их в формате json вызывающей стороне.- приложение webgui (вызывающая сторона), которое использует данные json, предоставленные веб-службой.

Одно из представлений в приложении web gui содержит простую таблицу, которая визуализирует ответ json, полученный вебоказание услуг.Я хотел бы отформатировать определенные ячейки таблицы в соответствии с данными ячейки, например: ячейка со значением <10 имеет красный фон.</p>

Было бы неплохо, если бы информация о форматировании отсутствовала в веб-интерфейсе, но могла также предоставляться веб-службой.Могу ли я также содержать информацию о функции в выводе json?Любые другие идеи для достижения моей цели?

Спасибо.

Answer 1

Я разработал плагин jQuery для представления данных JSON в таблице HTML. Это послужит вам хорошей основой для того, что вы делаете. Просто раскошелиться на GitHub https://github.com/anuary/jquery-json-to-table.

Добавить недостающие кусочки будет легко. Сценарий уже предлагает (назначая классы для строк таблицы) тип данных. Кроме того, он позволяет просматривать данные, а не отображать все дерево сразу.

Answer 2

Если я читаю это правильно, вы, безусловно, можете добавить некоторую информацию о стилях в 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 вкаждое свойство, если вам нужно стилизовать каждое независимо.

[{'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>

Answer 3

Попробуйте JSON.stringify.

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

Теперь отобразите его на теге pre

Используя AngularJS

function json($scope) {

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

  {{jsonObject}}

{{jsonObjectFormatted}}