I’m getting some JSON from a remote data source and trying to use that with jsPDF AutoTable. The JSON looks like this :-

[
  {
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipitnsuscipit recusandae consequuntur expedita et cumnreprehenderit molestiae ut ut quas totamnnostrum rerum est autem sunt rem eveniet architecto"
  },
  {
    "userId": 1,
    "id": 2,
    "title": "qui est esse",
    "body": "est rerum tempore vitaensequi sint nihil reprehenderit dolor beatae ea dolores nequenfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendisnqui aperiam non debitis possimus qui neque nisi nulla"
  },
  {
    "userId": 1,
    "id": 3,
    "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
    "body": "et iusto sed quo iurenvoluptatem occaecati omnis eligendi aut adnvoluptatem doloribus vel accusantium quis pariaturnmolestiae porro eius odio et labore et velit aut"
  },
  {
    "userId": 1,
    "id": 4,
    "title": "eum et est occaecati",
    "body": "ullam et saepe reiciendis voluptatem adipiscinsit amet autem assumenda provident rerum culpanquis hic commodi nesciunt rem tenetur doloremque ipsam iurenquis sunt voluptatem rerum illo velit"
  },
  {
    "userId": 1,
    "id": 5,
    "title": "nesciunt quas odio",
    "body": "repudiandae veniam quaerat sunt sednalias aut fugiat sit autem sed estnvoluptatem omnis possimus esse voluptatibus quisnest aut tenetur dolor neque"
  }
 ]

And my code looks like this, where the variable “body” contains the JSON :-

const { jsPDF } = window.jspdf;
var doc = new jsPDF();
doc.autoTable({
   body: body,
   columns: [
     { header: 'ID', dataKey: 'id' },
     { header: 'Body', dataKey: 'body' },
   ],
        
   doc.save('table.pdf');

});

But this doesn’t display the ‘id’ and ‘body’ data items – it displays ‘userId’ and ‘id’. It doesn’t matter which dataKeys are selected in “columns” – it will always display the first 2 data items.

Looking at the data format used in the AutoTable example here https://github.com/simonbengtsson/jsPDF-AutoTable/tree/master, it is using a different format, which is almost JSON, but quite valid :-

body: [
    { europe: 'Sweden', america: 'Canada', asia: 'China' },
    { europe: 'Norway', america: 'Mexico', asia: 'Japan' },
  ],

If I amend my own JSON data so that it uses single quotes rather than double quotes around the both the key names and the text values, then AutoTable does output the expected data. But this is not valid JSON :-

    var body = [
        {
          'id': 1,
          'title': 'sunt aut facere repellat provident occaecati excepturi optio reprehenderit',
          'body': 'quia et suscipitnsuscipit recusandae consequuntur expedita et cumnreprehenderit molestiae ut ut quas totamnnostrum rerum est autem sunt rem eveniet architecto'
        },
...

Is this a bug in jsPDF-AutoTable or is it expected that receiving valid JSON from a remote data source would always need to be manipulated into the format shown in AutoTable’s example?