How can I remove an object in JavaScript?

Viewed 136

There is an array like this:

var array = [
              {SchoolId: 2  ,GraderId: 465 , SchoolGraderName: "Example1256"},
              {SchoolId: 2  ,GraderId: 654,SchoolGraderName: "Example45"},
              {SchoolId: 2  ,GraderId: 876,SchoolGraderName: "Example895"},
              {SchoolId: 34 ,GraderId: 796,SchoolGraderName:"Example2156"},
              {SchoolId: 45 ,GraderId: 356,SchoolGraderName:"Example315"},
              {SchoolId: 45 ,GraderId: 457,SchoolGraderName:"Example56715"}
              {SchoolId: 45 ,GraderId: 678,SchoolGraderName:"Example37675"}
              {SchoolId: 45 ,GraderId: 465 ,SchoolGraderName:"Example97685615"}
            ]

I am trying to delete the whole objects Where the GraderId is some value (:

$(function() {
            $("#schoolGraders").on("dblclick",
                function() {
                    $.each(array,function(i,r){
                        if (r.GraderId == $(this).val()) {
                            r.removeItem;
                       }
                });
        });

the code above does not work.

Here is the HTML Code:

<select class="form-control" id="schoolGraders" style="width: 80%; height: 200px" 
multiple></select>

I generate the options like this:

item = "";
                $.ajax({
                    type: "GET",
                    url: "address" + $(this).val(),
                    contentType: "application/json",
                    dataType: "json"
                }).done(function (res) {
                    var iteem = "";
                    $.each(res,
                        function (i, r) {
                            iteem += '<option value="' + r.id + 
                             '">' + r.title + '</option>';
                        });
                    $("#graderSchools").html(iteem);
                });

Is there any condition in JavaScript So I can remove objects WHERE the GraderId is some value ?

4 Answers

Something like this perhaps, lets say you want to remove object where GraderId is 876.

var array = [
              {SchoolId: 2  ,GraderId: 465 , SchoolGraderName: "Example1256"},
              {SchoolId: 2  ,GraderId: 654,SchoolGraderName: "Example45"},
              {SchoolId: 2  ,GraderId: 876,SchoolGraderName: "Example895"},
              {SchoolId: 34 ,GraderId: 796,SchoolGraderName:"Example2156"},
              {SchoolId: 45 ,GraderId: 356,SchoolGraderName:"Example315"},
              {SchoolId: 45 ,GraderId: 457,SchoolGraderName:"Example56715"},
              {SchoolId: 45 ,GraderId: 678,SchoolGraderName:"Example37675"},
              {SchoolId: 45 ,GraderId: 465 ,SchoolGraderName:"Example97685615"}
            ]
            
array.forEach((item, index) => {
    if(item.GraderId === 876){
    delete array[index]
  }
})

console.log(array)

You can use filter():

var array = [
  {SchoolId: 2  ,GraderId: 465 , SchoolGraderName: "Example1256"},
  {SchoolId: 2  ,GraderId: 654,SchoolGraderName: "Example45"},
  {SchoolId: 2  ,GraderId: 876,SchoolGraderName: "Example895"},
  {SchoolId: 34 ,GraderId: 796,SchoolGraderName:"Example2156"},
  {SchoolId: 45 ,GraderId: 356,SchoolGraderName:"Example315"},
  {SchoolId: 45 ,GraderId: 457,SchoolGraderName:"Example56715"}
  {SchoolId: 45 ,GraderId: 678,SchoolGraderName:"Example37675"}
  {SchoolId: 45 ,GraderId: 465 ,SchoolGraderName:"Example97685615"}
]

const filteredArr = array.filter(item => item.GraderId !== $(this).val())

Then maps items to HTML using this filteredArray

I found the way, Thank you all. Here I wanted to share it to all so everbody can use it.

$("#schoolGraders").on("dblclick",
                function () {

                    var deletedGraderId = $(this).val();

                    var schoolId = $("#selectedSchools").val();

                    $.each(array,
                        function (i, r) {
                            if (r.GraderId == deletedGraderId && r.SchoolId == schoolId) {
                                array.splice(i, 1);
                            }
                        });


                });

The filter method filters an array removing elements that do not pass the condition argument. It's usally the best way to remove array element in js.

I think the main problem in your code is this.val(). this is quite an advanced js concept, as it has multiple meanings depending on the context. In your case, I think it refers to the current value r of your each callback, and not the select element. I prefer evt.currentTarget instead.

The following code must be called inside the done callback as the won't exist before. This kind of error, due to inexistent elements, is silently ignored by jQuery.

var schoolGraders = document.getElementBydId('schoolGraders');
schoolGraders.addEventListener('dblclick', (evt)=> {
    array.filter((obj,i)=>  obj.GraderId != +evt.currentTarget.value)
});

However I'd be vary of using the double click event as it has poor support on Android browsers.

Related