Bonjours à tous,

Dans le cadre d'un projet pour lequel je travail, je suis en ce moment entrain de travailler sur l'intérface d'administration. Les données chargé proviennes d'un fichier JSON (format imposé) et j'ai fait pour commencer ce petit bout de code qui permet d'afficher une première liste (collections) et en cliquant sur une des collections je charges une seconde liste (oeuvres). A cette étape tout fonctionne parfaitement mais étant débutant avec JSON j'aurais souhaiter votre aide pour voir si le code pouvait être amélioré.

Je vous remercie grandement d'avance de vos avis et conseils

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
 
/*
 * Script pour affichage des informations du fichier JSON
 */
 
jQuery(document).ready(function($) {
 
    function div_data(element,id, thumbnail, title, text){
        var div  = '<div id="'+element+'-id-'+id+'" class="element '+element+' click">';
            div += '<span class="thumb-profil"><img src="'+thumbnail+'"alt="'+title+'" /></span>';
            div +=  '<h3><a href="#">'+title+'</a></h3>';
            div +=  '<span class="element-text">'+text+'</span>';
            div += '</div>';
 
        return div;
    }
 
    $.getJSON('http://localhost:8888/monde/media/json/collections.json', function(data) {
 
        $.each(data.collections, function(i,data){
 
            //insertion du total de collection dans l'entête
            $("#total-collections").html("("+(data.total)+")");
 
            //DIV des aperçu de collection et oeuvres
 
            var div_collection = div_data("collection", data.id, data.thumbnail, data.title, data.description)
 
            //ajout à la fin du div collection le div_data avec une boucle each
            $(div_collection).hide().appendTo(".collections").fadeIn();
 
        });
 
        $(".element").click(function(){
 
            //récupération de l'ID de la collection lors du clique
            var $id = $(this).attr("id").match(/[0-9+]*$/gi)[0];
 
            //on vide à chaque click le contenu du div artworks et la valeur total
            $("div").remove(".artwork");
            $("#total-artwork").html("");
 
 
            $.each(data.collections, function(i,data){   
 
                //permet de filtrer en fonction de l'ID de la collection cliqué et si elle contient des oeuvres
                if(data.id == $id && data.total != 0){
 
 
                    $("#total-artwork").html("("+(data.total)+")");
 
                    //affichage des oeuvres de la collection choisie
                    $.each(data.arts, function(i,data){ 
 
                        //DIV des aperçus de collection et oeuvres
                        var div_artwork = div_data("artwork", data.id, data.thumbnail, data.title, data.author)
 
                        $(div_artwork).hide().appendTo(".artworks").fadeIn();
 
                    });
 
                }
 
            });
 
        });
 
    });
 
 
 
    //---- Script de debug pour la lecture du fichier json -------//
    $.ajaxSetup({
        "error":function(XMLHttpRequest,textStatus, errorThrown) {   
            alert(textStatus);
            alert(errorThrown);
            alert(XMLHttpRequest.responseText);
        }
    });
 
 
});