nouvel element

index.html

@@ -16,6 +16,9 @@
                    :nom="team.name"
                    :description="team.description">
         </team-card>
+        <div v-for="new in {{showGet()}}">
+            <news-card title="new.title" date="oeoeoe"/>
+        </div>
     </div>
 
     <script src="src/service/link-service.js"></script>
@@ -27,13 +30,15 @@
         import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
         import NavBar from '/src/view/nav-bar.js';
         import TeamCard from '/src/view/team-card.js';
+        import NewsCard from '/src/view/news-card.js';
         const app = createApp({
             created(){},
             data(){
                 return{
                     teams: [],
                     edit:false,
-                    newTeam:null
+                    newTeam:null,
+                    news: []
                 }
             },
             methods:{
@@ -60,6 +65,7 @@
 
         app.component('NavBar', NavBar);
         app.component('TeamCard', TeamCard);
+        app.component('NewsCard',NewsCard);
 
         app.mount('#app');
     </script>

main.js

@@ -3,4 +3,28 @@ linkService.getLinks();
 
 
 let api = new ApiService()
-console.log("api get",api.get(2))
+
+
+let res = api.get(2)
+
+
+async function showGets(id)
+{
+
+    console.group("main.js")
+    let api = new ApiService()
+
+    let res = await api.get(id);
+    
+    let array =[]
+
+    for (let i = 0; ii < 5; ii++) {
+        array.push(res.articles[i]);
+        
+    }
+    console.log(res.articles[0])
+    
+    console.groupEnd("main.js")
+
+    return array;
+}

package.json

@@ -4,8 +4,12 @@
   "description": "2a tp note js",
   "main": "main.js",
   "scripts": {
+    "serve": "npx serv",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "jault aurian & jacquelin bastien",
-  "license": "ISC"
+  "license": "ISC",
+  "keywords": [
+    "JavaScript"
+  ]
 }

src/class/api-service.js

@@ -1,7 +1,7 @@
 class ApiService{
     constructor(){}
     async get(id){
-        const baseUrl = `https://jsonplaceholder.typicode.com/posts/${id}`;//edit
+        const baseUrl = `https://newsapi.org/v2/everything?q=esport&apiKey=${KEYAPI}`;//edit
         const headers = {
             method: 'GET'
         };
@@ -9,6 +9,7 @@ class ApiService{
         console.log("response",response)
         let responseJson = await response.json()
         console.log("responseJson",responseJson)
+        return responseJson;
     }
     async post(){
         const baseUrl = `https://jsonplaceholder.typicode.com/posts/`;//edit
@@ -29,4 +30,4 @@ class ApiService{
 	            throw new Error('Une erreur est survenue durant l\'appel HTTP.');
         })
     }
-}
+}

src/misc/const.js

@@ -0,0 +1 @@
+const KEYAPI = "1639059dc5a942089bd2d29db40ee7e7"

src/view/news-card.js

@@ -0,0 +1,12 @@
+export default{
+    props: {
+        title: String,
+        date: String
+    },
+    template: `
+        <article>
+            <span>{{title}}</span>
+            <p>{{date}}</p>
+        </article>
+    `
+}