Динамически построить дисплей для JSON-Data и JSONschema - PullRequest
Новая
       8

Динамически построить дисплей для JSON-Data и JSONschema

0 голосов
/ 30 ноября 2018

У меня есть JSON Schema, который описывает данные, которые я хочу отобразить. 

{
    "title": "BeautifulDataRequest",
    "type": "object",
    "properties": {
        "DateOfRequest": {
            "type": "string"
        },
        "PeopleRequested": {
            "type": "string"
        },
        "JourneyType": {
            "type": "string"
        },
        "AccommodationDate": {
            "type": "string"
        },
        "Request": {
            "type": "string"
        }
    }
}

И у меня есть JSON-Data Я хочу отобразить.JSON может содержать дополнительные поля, которые не описаны в JSON schema, но я только хочу отобразить значения, описанные в этой схеме.

Схема и данные могут различаться в зависимости от типа данных.Поскольку существует множество различных схем, я ищу что-то, что может «динамически создавать отображение в зависимости от схемы».

Я уже работал с JSONEditor , но этот редактор предназначен для изменениясхема, больше, чем отображение данных.Я могу просто отобразить данные, установив все поля только для чтения, но я думаю, что это немного неловко.

Пример данных: 

{
    "Id": "9be37e98-bc35-4aa5-8c74-39ea76415db5",
    "UserId": "c7c76272-e6f3-e811-93fc-005056b22eda",
    "TempId": null,
    "UserTypeName": null,
    "StoreCode": "fdsdf",
    "CurrentStepCode": "Done",
    "StoreAssignedName": "",
    "CreateDate": "2018-11-30T10:05:25.867",
    "isDeleted": false,
    "AdditionalData": {},
    "Type": {
        "Id": "c7c76272-e6f3-e811-93fc-005056b22eda",
        "Name": "Request"
    },
    "DateOfRequest": "17.11.2018",
    "PeopleRequested": "2",
    "JourneyType": "Doppelzimmer",
    "Request": "Nachfrage zur Reise",
    "AccommodationDate": "Insel Rügen – Perle der Ostsee"
}

Короче говоря, у меня есть:JSON-данные, которые описываются JSON-схемой.Я хочу отобразить эти данные на основе JSON-схемы.Внешний интерфейс - это HTML с начальной загрузкой 2 и JavaScript.

Вопрос: Кто-нибудь знает библиотеку путей / (JavaScript) для динамического отображения JSON-данных, описываемых JSON-Schema?

1 Ответ

0 голосов
/ 30 ноября 2018 

var schema = {
    "title": "BeautifulDataRequest",
    "type": "object",
    "properties": {
        "DateOfRequest": {
            "type": "string"
        },
        "PeopleRequested": {
            "type": "string"
        },
        "JourneyType": {
            "type": "string"
        },
        "AccommodationDate": {
            "type": "string"
        },
        "Request": {
            "type": "string"
        }
    }
};

var sampleData = [{
    "Id": "9be37e98-bc35-4aa5-8c74-39ea76415db5",
    "UserId": "c7c76272-e6f3-e811-93fc-005056b22eda",
    "TempId": null,
    "UserTypeName": null,
    "StoreCode": "fdsdf",
    "CurrentStepCode": "Done",
    "StoreAssignedName": "",
    "CreateDate": "2018-11-30T10:05:25.867",
    "isDeleted": false,
    "AdditionalData": {},
    "Type": {
        "Id": "c7c76272-e6f3-e811-93fc-005056b22eda",
        "Name": "Request"
    },
    "DateOfRequest": "17.11.2018",
    "PeopleRequested": "2",
    "JourneyType": "Doppelzimmer",
    "Request": "Nachfrage zur Reise",
    "AccommodationDate": "Insel Rügen – Perle der Ostsee"
}, {
    "Id": "1",
    "UserId": "2",
    "TempId": null,
    "UserTypeName": null,
    "StoreCode": "fdsdf",
    "CurrentStepCode": "Done",
    "StoreAssignedName": "",
    "CreateDate": "2018-11-30T10:05:25.867",
    "isDeleted": false,
    "AdditionalData": {},
    "Type": {
        "Id": "c7c76272-e6f3-e811-93fc-005056b22eda",
        "Name": "Request"
    },
    "DateOfRequest": "test",
    "PeopleRequested": "test",
    "JourneyType": "test",
    "Request": "test",
    "AccommodationDate": "test"
}];

function matchSchema (samples, schema) {
  var dataset = [];
  samples.forEach( sample => {
    // Deep clone schema (may use lodash or underscore)
    var clone = jQuery.extend(true, {}, schema);
    _.findKey(schema.properties, (value, key) => {
      if (_.has(sample, key)) {
        // You may validate type here
        clone.properties[key] = sample[key];
      }
    });
    // Add clone to dataset
    dataset.push(clone);
  });
  return dataset;
}

var result = matchSchema(sampleData, schema);
var $table = $('#result-table tbody');
console.log(result);

// Draw table
result.forEach(item => {
  var row = $('<tr/>');
  _.each(item.properties, (value, key) => {
    var column = $('<td/>').text(value);
    row.append(column);
  });
  $table.append(row);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://fastcdn.org/Underscore.js/1.8.3/underscore-min.js"></script>
<table id="result-table" border="1">
  <thead>
    <tr>
      <th>col1</th>
      <th>col2</th>
      <th>col3</th>
      <th>col4</th>
      <th>col5</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
...