Failed to parse Dialogflow response into AppResponse

Question

I'm having an issue when I perform an array map prior to conv.ask. I'm getting an error related to a malformed JSON object, but as far as I can tell it should be valid.

const timetableCells = timetable.Trains.map((item) => {
  return {
    cells: [item.Line, item.Destination, item.Car, item.Min],
  }
})

conv.ask(new Table({
  title: `Rail Timetable for ${station}`,
  subtitle: 'Timetable as of x date',
  image: new Image({
    url: 'http://google.com/image.png',
    alt: 'Logo'
  }),
  columns: [
    {
      header: 'Line',
      align: 'LEADING'
    },
    {
      header: 'Destination',
      align: 'LEADING'
    },
    {
      header: 'Car',
      align: 'LEADING'
    },
    {
      header: 'Arrival',
      align: 'LEADING'
    },
  ],
  rows: timetableCells,
  buttons: new Button({
    title: 'Button Title',
    url: 'https://github.com/actions-on-google'
  })
}))

This is what timetable looks like:

{"Trains":[{"Car":"8","Destination":"Glenmont","DestinationCode":"B11","DestinationName":"Glenmont","Group":"1","Line":"RD","LocationCode":"B09","LocationName":"Forest Glen","Min":"9"},{"Car":"8","Destination":"Glenmont","DestinationCode":"B11","DestinationName":"Glenmont","Group":"1","Line":"RD","LocationCode":"B09","LocationName":"Forest Glen","Min":"18"},{"Car":"8","Destination":"Glenmont","DestinationCode":"B11","DestinationName":"Glenmont","Group":"1","Line":"RD","LocationCode":"B09","LocationName":"Forest Glen","Min":"36"},{"Car":"8","Destination":"Shady Gr","DestinationCode":"A15","DestinationName":"Shady Grove","Group":"2","Line":"RD","LocationCode":"B09","LocationName":"Forest Glen","Min":""}]}

If I log timetableCells I have an array that looks like this, and I'm assigning it to rows inside of conv.ask which should be equal to what Google Assistant is expecting according to their documentation.

[ { cells: ['1', '2', '3', '4'] }, { cells: ['1', '2', '3', '4'] } ]

If I stringify the JSON object I'm passing to conv.ask it looks correct:

JSON.parse("{\"title\":\"Rail Timetable for Farragut North\",\"subtitle\":\"Timetable as of x date\",\"columns\":[{\"header\":\"Line\",\"align\":\"LEADING\"},{\"header\":\"Destination\",\"align\":\"LEADING\"},{\"header\":\"Car\",\"align\":\"LEADING\"},{\"header\":\"Arrival\",\"align\":\"LEADING\"}],\"rows\":[{\"cells\":[\"RD\",\"Glenmont\",\"8\",\"\"]},{\"cells\":[\"RD\",\"Shady Gr\",\"8\",\"\"]}]}")

Where am I going wrong here? I know this line is the one causing the issue as I can replace it and it works correctly. The debugger points to a JSON validation error but I can't seem to see it.

@sai.raj Are you referring to the data payload from timetable? If so I've updated the original post. — James Ives

James Ives James Ives · Accepted Answer · 2018-11-25T13:11:04

This took a really long time for me to figure out, and it's weird that a different error wasn't thrown here. It was obvious that the data in the rows needed to match the amount of headers in the table, however what wasn't obvious was that the strings cannot be empty, otherwise you'll get a parsing error.

There were cases where some values were returned as empty strings from my API response which was causing the problem. Changing the code to the following fixed the issue as it ensures that they'll never be empty strings.

const timetableCells = timetable.Trains.map((item) => {
  return {
    cells: [item.Line || "N/A", item.Destination || "N/A", item.Car || "TBD", item.Min || "TDB"],
  }
})

Failed to parse Dialogflow response into AppResponse

2 Answers