Wie zeige ich Antwortdaten im Frontend an?

Question

ich GET Anfragen an den Github API gemacht haben:

axios.get('https://api.github.com/users/roadtocode822') 
    .then(function (response) { 
    console.log(response.data); 
    }) 

ich die Antwortdaten erhalten. Diese Funktion befindet sich in der Datei app.js.

Auch wohnt auf dem app.js Datei ist der folgende Code:

app.get('/', function(req, res){ 
    Article.find({}, function(err, articles){ 
     if(err){ 
      console.log(err); 
     } else { 
      res.render('index', { 
       title: "Articles", 
       articles: articles 
      }); 
     } 
    }); 
}); 

Ich bin der Lage, Daten aus meiner mongodb Datenbank durch das Article.js Mungo Modell abfragen und die Daten an meine index.pug Datei zu senden.

Ich möchte in der Lage, die GITHUB-Antwortdaten zu nehmen und es auch in einer meiner Mug View-Dateien rendern. Ich habe das Gefühl, dass mir ein Konzept in Javascript fehlt, das mich daran hindert, das zu erreichen.

Vielen Dank im Voraus.

Answer 1

Um die Github-Antwort als JSON zu erhalten, verwenden Sie einfach JSON.parse(). Sie können Ihre .pug-Vorlage jedoch nicht am Frontend verwenden. Diese Vorlage wird auf der Serverseite interpretiert und von Server zu Client als einfacher HTML-Code gesendet. Wenn Sie sich für Front-End-Templating interessieren, sehen Sie sich etwas wie handlebars.js an.

Answer 2

axios.get('https://api.github.com/users/roadtocode822') 
    .then(function (response) { 
    console.log(response.data); 
    }) 

aus dem obigen Code, response.data wird ein HTML-Inhalt sein, da Ihr Server res.render zurückgibt.

in dem Front-End, sollten Sie a tag und form post statt ajax call wie diese

<a href="https://api.github.com/users/roadtocode822">Click</a>