Problème avec JSON

Ton fichier JSON n'est pas correct.
Essaye avec ça

[
  {
    "couleur": "noir",
    "voiture": "porsche",
    "annee": "1997"
  },
  {
    "couleur": "bleu",
    "voiture": "opel",
    "annee": "1996"
  }
]

Une fois ton fichier json corrigé, tu peux remettre ton ancien code

	$('#charger').click(function() { 
		
		$.getJSON('json/concert.json', function(donnees) {
			$.each(donnees, function (index, voiture) {
				console.log(voiture);
				$('#r').append('<p><b>Couleur</b> : ' + voiture.couleur + '</p>');
				$('#r').append('<p><b>Voiture</b> : ' + voiture.voiture + '</p>');
				$('#r').append('<p><b>Année</b> : ' + voiture.annee + '</p>');
			});
		});
	}); 
});

mais perso.. je préfère la syntaxe du $.ajax qui permet d'avoir une méthode "error" et donc savoir lorsqu'il y a un souci de quoi il retourne.

ok. je n'étais pas sûr.
Bon.. et ce code là :

$(function() {
    $('#charger').click(function(){ 
      console.log('chargement en cours...');
      var url = 'json/concert.json';
      $.ajax({
        dataType: "json",
        url: url,
        success: function(donnees) {
            console.log('les donnees du fichier :');
            console.log(donnees);
            $.each(donnees, function (index, voiture){
              console.log('boucle : ' + index);
              console.log(voiture);
              $('#r').append('<p><b>Couleur</b> : ' + voiture.couleur + '</p>');
              $('#r').append('<p><b>Voiture</b> : ' + voiture.voiture + '</p>');
              $('#r').append('<p><b>Année</b> : ' + voiture.annee + '</p>');
            });
          },
        error :function(jqXHR, textStatus, errorThrown) {
            console.log("error ! " + textStatus + ' : '   + jqXHR.responseText);
          }
      });
    });
  });

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8" />
		<title>Concerts</title>

		<script src="js/jquery-3.3.1.min.js"></script>
		<script src="js/concert.js"></script>
	</head>

	<body>
		<button id="charger">Charger</button> <!-- afficher losqu'on appui sur le bouton -->
		<div id="r">

		</div>
	</body>
</html>

$(function() {
	$('#charger').click(function() { 
		$.getJSON('json/concert.json', function(donnees) {
			$('#r').html('<p><b>Couleur</b> : ' + donnees.couleur + '</p>');
			$('#r').append('<p><b>Voiture</b> : ' + donnees.voiture + '</p>');
			$('#r').append('<p><b>Année</b> : ' + donnees.annee + '</p>');
		});
	}); 
});

{
	"couleur": "noir",
	"voiture": "porsche",
	"annee": "1997"
},
{
	"couleur": "bleu",
	"voiture": "opel",
	"annee": "1996"
}

mais, je ne vois pas où mettre cette boucle

Ben.... là où tu veux récupérer les données....
c'est à dire dans

$.getJSON('json/concert.json', function(donnees) {

  // ICI
});

NB: Dans le lien que je t'ai donné pour les balises de code... il est y est indiqué qu'il faut préciser le LANGAGE afin que la coloration syntaxique s'applique. (il serait bien également de faire de l'indentation... )
Exemple.. au lieu de :

$(function() {
$('#charger').click(function() {
$.getJSON('json/concert.json', function(donnees) {
$('#r').html('<p><b>Couleur</b> : ' + donnees.couleur + '</p>');
$('#r').append('<p><b>Voiture</b> : ' + donnees.voiture + '</p>');
$('#r').append('<p><b>Année</b> : ' + donnees.annee + '</p>');
});
});
});

moi j'ai : (en indiquant "js" dans les balises de code : <code js></code> )

$(function() {
  $('#charger').click(function() {
    $.getJSON('json/concert.json', function(donnees) {
        $('#r').html('<p><b>Couleur</b> : ' + donnees.couleur + '</p>');
        $('#r').append('<p><b>Voiture</b> : ' + donnees.voiture + '</p>');
        $('#r').append('<p><b>Année</b> : ' + donnees.annee + '</p>');
    });
  });
});

C'est plus joli et plus lisible non ??!!

<!DOCTYPE html>
<html lang="fr">
     <head>
            <meta charset="utf-8" />
            <title>Concerts</title>

            <script src="js/jquery-3.3.1.min.js"></script>
            <script src="js/concert.js"></script>
      </head>

      <body>
              <button id="charger">Charger</button> 
              <div id="r">

              </div>
       </body>
</html>

$(function() {
	$('#charger').click(function() { 
		
		$.getJSON('json/concert.json', function(donnees) {
			$('#r').html('<p><b>Couleur</b> : ' + donnees.couleur + '</p>');
			$('#r').append('<p><b>Voiture</b> : ' + donnees.voiture + '</p>');
			$('#r').append('<p><b>Année</b> : ' + donnees.annee + '</p>');
		});
	}); 
});