Получить данные на основе ввода формы Javascript - PullRequest
Новая
       7

Получить данные на основе ввода формы Javascript

0 голосов
/ 04 мая 2018

У меня есть форма, которая принимает пользовательский ввод и распечатывает данные на веб-странице. Моя цель - подключиться к Twitter API и распечатать данные на основе результатов ввода. Например, если пользователь вводит определенный хэштег, то я хочу, чтобы все хештеги с входными данными были напечатаны. Я могу получить входные данные и распечатать их, я также могу распечатать данные из хэштега по щелчку (без входных данных). Но когда я пытаюсь реализовать поиск в Твиттере с помощью формы ввода, чего-то не хватает.

Моя форма 

<form class="form" action="/" method="post" name="form">              
    <input type="text" name="twdata" placeholder="Add data">
    <button type="submit">Submit</button>
</form>

Мой JS с Twitter API (не работает) 

var theTweets = [];

app.post('/',function(req,res){
    // Grab form data and push it to array
    var twdata = req.body.twdata;

    var params = {
       q: twdata
    }

    client.get('search/tweets', params, getData);

    function getData(err, data, response) {
        var content = data.statuses;
        for (var i = 0; i < content.length; i++) {
            theTweets.push( content[i].text );
        }
    }

    // Display form data on home template
    res.render('home', {twData: theTweets});
});

Мой JS без Twitter API (работает) 

var formData = [];

app.post('/',function(req,res){
    // Grab form data and push it to array
    var twdata = req.body.twdata;
    formData.push(twdata);

    // Display form data on home template
    res.render('home', {dataInfo: formData});
});

Что я делаю не так?

1 Ответ

0 голосов
/ 04 мая 2018

Я думаю, что основная проблема в том, что вы работаете с Node.js (Express) и вам необходимо знать об асинхронном вызове, это главная проблема при работе с Node.js, мы должны передумать относительно исполнительный приказ, поскольку он не является процедурным исполнением. Я пытался смоделировать вашу программу как простое приложение Node.js, проверьте ниже: 

var theTweets  = [];

var res = {
    render: function (page, objData) {
        console.log(page +' '+objData.tweets);
    }
}
var req = {
    body: {
        twdata: '@user'
    }
}

var app = {
    post: function (page, callback) {
        console.log('Page invoked '+page);
        callback(req, res);
    }
}

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

var client = {
    get : async function (tweets, params, callback) {
        var err = '';
        var data = {statuses: [{text:'tweet01'},{text:'tweet02'}]};
        var response = {};
        await sleep(2000); //code for simulate delay in async call to twitter
        callback(err, data, response);
    }
}

app.post('/', function(req, res) {
    var twdata = req.body.twdata;

    var params = {
       q: twdata
    }

    client.get('search/tweets', params, getData);

    function getData(err, data, response) {
        var content = data.statuses;

         content.forEach ((tweet)=>theTweets.push(tweet.text));

        res.render('home', {'tweets': theTweets});  //correct 
    }
    //res.render('home', {'tweets': theTweets});    //wrong 
});
...