为 JSON-Data 和 JSONschema 动态构建显示

Question

我有一个 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 中未描述的其他字段，但我只想显示此架构中描述的值。

架构和数据可能因数据类型而异。由于有很多不同的模式，我正在寻找可以 "create a display dynamically depending on the 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-schema 描述。我想根据 JSON-schema 显示此数据。前端 HTML 有 bootstrap2 和 JavaScript 可用。

问题：有人知道动态显示 JSON-JSON-Schema 描述的数据的方法/(JavaScript) 库吗？

Answer 1

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>

为 JSON-Data 和 JSONschema 动态构建显示

Dynamically build display for JSON-Data and JSONschema

html

javascript

frontend

json

jsonschema