DevExtreme jQuery/JS - JSON Data

To bind the List to data in a JSON format, assign the data's URL to the dataSource option.

JavaScript
  • $(function() {
  • $("#listContainer").dxList({
  • dataSource: "https://jsonplaceholder.typicode.com/posts",
  • itemTemplate: function(data, _, element) {
  • element.append(
  • $("<i>").text(data.id + " | "),
  • $("<b>").text(data.title), $("<br />"),
  • $("<p>").text(data.body).css({
  • "margin-top": 10,
  • "white-space": "normal"
  • })
  • )
  • }
  • });
  • });

Note that you can also use a JSONP callback parameter supported by jQuery.ajax().

JavaScript
  • $(function() {
  • $("#listContainer").dxList({
  • dataSource: "http://www.example.com/dataservices/jsonpdata?callback=?",
  • // ...
  • });
  • });

If you need to process data after obtaining it, implement the CustomStore. For details, see the Custom Sources topic.

See Also