Bonjour,

J'apprends le javascript et je souhaite mettre en place une application de "Ticketing" ,un peu comme une to-do list. 

La fonction fetchIssues s'occupe de récupérer les valeurs des input et générer l'HTML qui va contenir ces valeurs.

Dans ma boucle for, j'initialise le compteur i à 0 mais quelque chose cloche.

Voici mon code:

/* Event handler */
document.getElementById('issueInputForm').addEventListener('submit', sauvegarderProblemes);

function sauvegarderProblemes(e) {
  var issueDesc = document.getElementById('issueDescInput').value;
  var issueSeverity = document.getElementById('issueSeverityInput').value;
  var issueAssignedTo = document.getElementById('issueAssignedToInput').value;
  var issueId = chance.guid();
  var issueStatus = 'Ouvert';

  var issue = {
    id: issueI,
    description: issueDesc,
    severity: issueSeverity,
    issueAssignedTo: issueAssignedTo,
    status: issueStatus
  }

  if (localStorage.getItem('issues') == null) {
    var issues = [];
    issues.push(issue);
    localStorage.setItem('issues', JSON.stringify(issues));
  } else {
    var issues = JSON.parse(localStorage.getItem('issues'));
    issues.push(issue);
    localStorage.setItem('issues', JSON.stringify(issue));
  }

  document.getElementById('issueInputForm').reset();

  recupererProblemes();

  e.preventDefault();
}

function recupererProblemes() {
  var issues = JSON.parse(localStorage.getItem('issues'));
  var issuesList = document.getElementById('issuesList');//reference à la div du même nom

  issuesList.innerHTML = '';//on s'assure que le contenu de la div est vide.

  /* on va procéder à une boucle pour iterer sur la var issues
    pour chaques problèmes dans l'array issues on va generer le code HTML
    dans lequel le contenu du problème va apparaître
  */

  for (var i = 0; i < issues.length; i++) {
    var id = issues[i].id;
    var description = issues[i].description;
    var severity = issues[i].severity;
    var assignedTo = issues[i].assignedTo;
    var issueTarget = issues[i].issueTarget;
    var status = issues[i].status;

    issuesList.innerHTML += '<div class="well">' +
      '<h6>Issue ID: ' + id + '</h6>'
    '<p><span class="label label-info">' + status + '</span></p>' +
      '<h3>' + description + '</h3>' +
      '<p><span class="glyphicon glyphicon-time "></span>' + issueTarget + '</p>' +
      '<p><span class="glyphicon glyphicon-time "></span>' + severity + '</p>' +
      '<p><span class="glyphicon glyphicon-user "></span>' + assignedTo + '</p>' +
      '<a href="#" onclick="fermerLeStatut(\'' + id + '\')" class="btn btn-warning">Fermer</a>' +
      '<a href="#"onclick="supprimerIssue(\'' + id + '\')" class="btn btn-danger">Supprimer</a>' +
      '</div>';


  }



}

Voyez-vous une faute de frappe ou de logique, j'ai du mal à cerner le problème, même avec l'aide Stackoverflow. 

Merci d'avance

Salut,

L'erreur n'est pas compliqué. La console te dit que tu essaies de lire la propriété 'length' d'une valeur 'null', ce qui signifie que ta variable 'issues' est 'null' et que 'localStorage' ne contient pas d'entrée 'issues'. Ou pas encore du moins, puisque ta fonction à l'air d'être lancé au chargement : c'est à dire potentiellement avant que tu ais associé une valeur à cette clé.

Pour régler le problème, tu peux modifier ton association de valeur en ajoutant l'opération 'ou exclusif' ('||') pour définir une valeur par défaut qui pourrait être un array vide. Celui-ci posséderait alors une propriété 'length' valant 0 certe, mais qui permettra à ton code de ce poursuivre sans erreur :

var issues = JSON.parse(localStorage.getItem('issues')) || [];

Désolé, je réponds depuis mon mobile : je n'ai pas accès aux balises de code.

-
Edité par BrainError 13 octobre 2020 à 20:29:41

Merci pour la réponse rapide, ça fonctionne!! 

Je note cette petite astuce!