fetch !

Soit le fichier products.json
{ "products" : [
  { "Name": "Cheese", "Price" : 2.50, "Location": "Refrigerated foods"},
  { "Name": "Crisps", "Price" : 3, "Location": "the Snack isle"},
  { "Name": "Pizza", "Price" : 4, "Location": "Refrigerated foods"},
  { "Name": "Chocolate", "Price" : 1.50, "Location": "the Snack isle"},
  { "Name": "Self-raising flour", "Price" : 1.50, "Location": "Home baking"},
  { "Name": "Ground almonds", "Price" : 3, "Location": "Home baking"}
]} 

On peut comparer les écritures :

 fetch('products.json')
    .then(function(response) {
      //console.log(response)
      return response.json();
    })
    .then(function(json) {
      let myList = document.querySelector('ul');
      myList.innerHTML = `${json.products.map(p => `<li> ${p.Name} </li>`).join('')}`;
    });

---------
let myList = document.querySelector('ul');
    fetch('products.json')
    .then(function(response) {
      //console.log(response)
      return response.json();
    })
    .then(function(json) {
      let li='';
      for (let p of json.products){
        li+= `<li><strong> ${p.Name} </strong></li>`
      }
      myList.innerHTML = li;
    });

-------------
    let myList = document.querySelector('ul');
    fetch('products.json')
    .then(function(response) {
      //console.log(response)
      return response.json();
    })
    .then(function(json) {
      for (let p of json.products){
        let li = document.createElement('li');
        li.innerHTML = `<strong> ${p.Name} </strong>`
        myList.appendChild(li);
      }
    });

correction

EX1

let max = arr.reduce(function(a,c) {  return (a.length> c.length)?a:c;});

EX2

EX3

let calcul = function (rayon) {

   const PI = 3.14;

   let perimetre = 2*PI*rayon,

    volume = 4/3*PI*Math.pow(rayon,3),

    diametre = rayon+rayon;

   return {perimetre,volume,diametre};

};

let {perimetre,volume} = calcul(val);

EX4

function foo ( ...args ) {

   args = args.filter( v => v % 2 == 0);

   console.log( args );

}

EX5

console.log(amis.reduce(function(prev, curr) {

 return [...prev, ...curr.prenoms];

},[]););

window.getComputedStyle

window.getComputedStyle donne les propriétés d'un éléments.

Remarque

Le plus grande clé peut être obtenue avec :

Math.max(...Object.keys(cssObj).map(v=>v.length))

Décomposition : fonction fléchée

Définition

let f = ([a, b] = [10, 10], {x: c} = {x: a - b}) => a + b + c;

Paramètres

f([2,3],{x:10});

f = ([a, b], {x: c}) => a + b + c;

// 15 = 2 + 3 + 10

Paramètres

f([2,3]);

([a, b], {x: c} = {x: a - b}) => a + b + c;

// 4 = 2 + 3 + ( 2 - 3 )

Paramètres

f(); 


f = ([a, b] = [10, 10], {x: c} = {x: a - b}) => a + b + c;

// 20 = 10 + 10 + ( 10 - 10 )

for of

let tabPers = [ { nom: "Dupont", sex : "f", }, { nom: "Brusel", sex : "h", }, { nom: "Dupont", sex : "f", }, ]; 

for(let v of tabPers) { console.log(`${typeof v}, ${v instanceof Object}`)}

Etude de v

Déboggeur

Rappels sur les objets, tableaux et pointeur !

let tabPers = [ { nom: "Dupont", sex : "f", }, { nom: "Brusel", sex : "h", }, { nom: "Dupont", sex : "f", }, ];

ou 

let tabPers = [  {
    nom: "Dupont",
    sex : "f",
  }, 
  {
    nom: "Brusel",
    sex : "h",
  },
  {
    nom: "Dupont",
    sex : "f",
  },  

];

Dessiner le résultat du code

let a = tabPers[1];

Dessiner le résultat du code

let a = tabPers[1];

let b = a["nom"];

Dessiner le résultat du code

let New = tabPers; 

Dessiner le résultat du code

let New = tabPers; 

New[2] = tabPers[0] = New[1];

code transf

let tabPers = [  {
    nom: "Dupont",
    sex : "f",
  }, 
  {
    nom: "Brusel",
    sex : "h",
  },
  {
    nom: "Dupont",
    sex : "f",
  },  
];

  
function toUpperName(person) {
  person.nom = person.nom.toUpperCase();
  return person;
}

function transf(array, fx) {
  let passed = [];
  
  for(let v  of array)
 passed.push(fx(v));

  return passed;
}
let T = transf(tabPers,toUpperName);

Afficher T et tabPers

solution : code