How to trigger a postback button to open another structured messages in facebook messenger chatbot

Question

I'm a newbie on programming, and I've successfully running the example from Facebook Messenger Platform - quick start case. But I'm facing a problem when doing some little changes on the original example:

I'd like to make a postback button click event to trigger another structured messages.When user click the 'coffee' button inside the menu page, it will show up another structure messages which is the coffee page.

UI Flow

I've used a if condiction to check the

JSON.stringify(event.postback.payload)

is the specific string (which should be 'coffee'),but it didn't display another structured messengers when I click the 'coffee' button in the menu page.

And here is my webhook code below:

app.post('/webhook/', function (req, res) {
let messaging_events = req.body.entry[0].messaging
for (let i = 0; i < messaging_events.length; i++) {
    let event = req.body.entry[0].messaging[i]
    let sender = event.sender.id
    if (event.message && event.message.text) {
        let text = event.message.text
        if (text === 'menu') {
            sendMenuMessage(sender)
            continue
        } else if (text === 'coffee') {
            sendCoffeeMessage(sender)
            continue
        }
        sendTextMessage(sender, "Text received, echo: " + text.substring(0, 200))
    }

    if (event.postback) {
        let text = JSON.stringify(event.postback.payload)
        sendTextMessage(sender, "Postback.payload received: " + text.substring(0, 200), token)

        if (text === 'coffee') {
            sendCoffeeMessage(sender)
        }

        continue
    }
}
res.sendStatus(200)})

And there're 2 structured messenger which included: 1. A menu page (display all kinds of product) 2. A coffee page (display only coffee)

1.Menu page To open the menu page, there has a function call sendMenuMessage:

function sendMenuMessage(sender) {
let messageData = {
    "attachment": {
        "type": "template",
        "payload": {
            "template_type": "generic",
            "elements": [{
                "title": "Our Menu",
                "subtitle": "Click buttons to see more",
                "image_url": "img.jpg",
                "buttons": [{
                    "type": "postback",
                    "title": "Coffee",
                    "payload": "coffee",
                }, {
                    "type": "postback",
                    "title": "Tea",
                    "payload": "tea",
                }],
            }]
        }
    }
}
request({
    url: 'https://graph.facebook.com/v2.6/me/messages',
    qs: {
        access_token: token
    },
    method: 'POST',
    json: {
        recipient: {
            id: sender
        },
        message: messageData,
    }
}, function (error, response, body) {
    if (error) {
        console.log('Error sending messages: ', error)
    } else if (response.body.error) {
        console.log('Error: ', response.body.error)
    }
})}

2.Coffee page To open the coffee page, there has a function call sendCoffeeMessage:

function sendCoffeeMessage(sender) {
let messageData = {
    "attachment": {
        "type": "template",
        "payload": {
            "template_type": "generic",
            "elements": [{
                "title": "Americano",
                "subtitle": "5$",
                "image_url": "img2.jpg",
                "buttons": [{
                    "type": "postback",
                    "title": "Detail",
                    "payload": "americano_detail",
                }],
            }, {
                "title": "Latte",
                "subtitle": "5.5$",
                "image_url": "img3.jpg",
                "buttons": [{
                    "type": "postback",
                    "title": "Detail",
                    "payload": "latte_detail",
                }],
            }]
        }
    }
}
request({
    url: 'https://graph.facebook.com/v2.6/me/messages',
    qs: {
        access_token: token
    },
    method: 'POST',
    json: {
        recipient: {
            id: sender
        },
        message: messageData,
    }
}, function (error, response, body) {
    if (error) {
        console.log('Error sending messages: ', error)
    } else if (response.body.error) {
        console.log('Error: ', response.body.error)
    }
})}

Answer 1

You should check below code

console.log(JSON.stringify('coffee') === 'coffee')
//false

The difference is

console.log(JSON.stringify('coffee'))
//'"coffee"'
console.log('coffee')
//'coffee'

This means the first one is the string including double quotes. Because that's the expression of string in json format.