My $.each() is only appending the Json object if it exists twice

#1

Hello,

I’m having a weird problem with my Jquery and I don’t really know how to describe it. I let the user give a title, description, date, and picture URL through a form that appends this data to the Json. This works completely fine. However when I want to display this data, the last Json object doesn’t get appended to the div I want to append it to. But when I give the same information through the form again and it gets added to the Json (so I have 2 objects who are exactly the same), my script suddenly gives that object twice for some reason. I’m really stuck with this and I can’t seem to figure it out. This is my code:

My Json:

[ 
   { 
      "titel":"",
      "beschrijving":"",
      "datum":"",
      "foto":""
   },
   { 
      "titel":"maandag",
      "beschrijving":"werkt",
      "datum":"op een dag",
      "foto":""
   },
   { 
      "titel":"maandag",
      "beschrijving":"werkt",
      "datum":"op een dag",
      "foto":""
   },
   { 
      "titel":"dinsdag",
      "beschrijving":"werkt",
      "datum":"op een dag",
      "foto":""
   },
   { 
      "titel":"dinsdag",
      "beschrijving":"werkt",
      "datum":"op een dag",
      "foto":""
   }
]

My script:

<script>
        $(document).ready(function () {
            console.log("ready!");

            $.getJSON("json/nieuws.json", function (data) {
                console.log(data);
                console.log(data[0].titel);
                var lengte = Object.keys(data).length;
                console.log(lengte);
                var teller = 0;


                $.each(data.reverse(), function (i) {
                   

                    let card= [
                        '<div class="card mb-3" style="max-width: 540px;">'+
                        '<div class="row no-gutters">'+
                        '<div class="col-md-4">'+
                        '<img id="foto" src="'+ data[i].foto+ '" class="card-img" alt="">'+
                        '</div>'+
                        '<div class="col-md-8">'+
                        '<div class="card-body">'+
                        '<h3 id="titel" class="card-title naam">'+ data[i].titel+ '</h3>'+
                        '<p id="beschrijving" class="card-text functie">'+ data[i].beschrijving+ '</p>'+
                        '<p id="datum" class="card-text telnummer"> <small class="text-muted">'+ data[i].datum+'</small></i></p>'+
                        '</div>'+
                        '</div>'+
                        ' </div>'+
                        '</div>'
                                ];
                        


                    if (foto == "") {
                        $("#" + klassefoto).attr("src", "img/wit.png");
                    } else {
                        $("#" + klassefoto).attr("src", foto);
                    }


                    $("#nieuwslijst").append(card);

                    return i < 4;
                });



                


            });

        });
    </script>

So again lets say I give the title “maandag”, nothing happens, if I give the same values again suddenly I get 2 cards with “maandag”. If I give “dinsdag”, nothing happens until I give the same values again and get it twice and so on.

Any help is appreciated. Thanks for reading!

#2

Some ideas:

  • if (foto == "") should be if (data[i].fotto ==="")
  • Why not simply return true instead of i < 4?
#3