API fetch fonctionne

master
Aurian JAULT 1 year ago
parent 964aa2f3c1
commit d9ffadb627

@ -29,7 +29,6 @@
import NavBar from '/src/view/nav-bar.js'; import NavBar from '/src/view/nav-bar.js';
import TeamCard from '/src/view/team-card.js'; import TeamCard from '/src/view/team-card.js';
import NewsCard from '/src/view/news-card.js'; import NewsCard from '/src/view/news-card.js';
import HomeModule from '/src/view/home-module.js';
const app = createApp({ const app = createApp({
created(){}, created(){},
@ -47,7 +46,6 @@
}); });
app.component('TeamCard', TeamCard); app.component('TeamCard', TeamCard);
app.component('NewsCard',NewsCard); app.component('NewsCard',NewsCard);
app.component('HomeModule',HomeModule);
app.component('NavBar', NavBar); app.component('NavBar', NavBar);
app.mount('#app'); app.mount('#app');

@ -7,7 +7,7 @@ class ApiService{
}; };
let response = await fetch(baseUrl, headers); let response = await fetch(baseUrl, headers);
let responseJson = await response.json() let responseJson = await response.json()
return responseJson; return responseJson
} }
async post(link){ async post(link){
const baseUrl = `${link}`;//edit const baseUrl = `${link}`;//edit

@ -1,13 +1,13 @@
class NewsService{ class NewsService{
constructor(){} constructor(){}
getNews(){ async getNews(){
const url = "https://newsapi.org/v2/everything?q=esport&apiKey=1639059dc5a942089bd2d29db40ee7e7"; const url = "https://newsapi.org/v2/everything?q=esport&apiKey=1639059dc5a942089bd2d29db40ee7e7";
const api = new ApiService() const api = new ApiService()
let response = api.get(url); let response = await api.get(url);
let tab = [] let tab = []
for (let i = 0; i < 5; i++) { for (let i = 0; i < 5; i++) {
tab.push(response[i]); tab.push(response.articles[i]);
} }
return tab; return tab;
} }

@ -1,16 +0,0 @@
export default{
props:{
news:Array
},
data:function(){
return {}
},
methods:{
},
template:`
<h2>Home</h2>
<div id="Teams">
<news-card v-for="nouv in news" :title="nouv.title" :date="nouv.publishedAt"/>
</div>
`
}

@ -2,7 +2,7 @@ export default{
data : function(){ data : function(){
return { return {
teams:[], teams:[],
news: [], news: [],
id: 1, id: 1,
name:'', name:'',
description:'', description:'',
@ -23,14 +23,13 @@ export default{
this.teamClicked=false; this.teamClicked=false;
} }
}, },
clickHome: function() { clickHome: async function() {
if(!this.homeClicked){ if(!this.homeClicked){
const api = new NewsService(); const api = new NewsService();
let infos = api.getNews(); let infos = await api.getNews();
console.log(infos) this.news = infos
this.news = infos this.homeClicked=true;
this.homeClicked=true; this.teamClicked=false;
this.teamClicked=false;
} }
else{ else{
@ -109,7 +108,9 @@ export default{
<span>Results</span> <span>Results</span>
</div> </div>
<home-module v-if="homeClicked" :news=this.news></home-module> <news-card v-for="info in news"
:title="info.title"
:date="info.publishedAt"/>
<div id="Teams" v-if="teamClicked"> <div id="Teams" v-if="teamClicked">
<form @submit.prevent> <form @submit.prevent>

@ -6,7 +6,7 @@ export default{
template: ` template: `
<article> <article>
<span>{{title}}</span> <span>{{title}}</span>
<p>{{date}}</p> <p>{{date.replace(/-/gi, "/").replace("Z", "").replace("T"," ").replace(":","h").split(":")[0]}}</p>
</article> </article>
` `
} }

Loading…
Cancel
Save