Why does my code remove objects without .remove()

I have an observable array* with objects that I display on page. It takes data from server when I load page and continuously refreshing every minute.

I wrote function that every second load new data from server to arrays, if service is added -> to add colection, if service is deleted -> to remove colection. Then I have function that pushing/removing data to/from main array* every minute.

First problem is that when I click on remove button on other page to delete service, it doesn't erase it from dashboard page. I found out why but doesn't know what to do.

In first function where it should just load data from server to delete colection, it extra erase service from the main array* without .remove() and doesn't change the page.

Function to load data to the remove collection.

ActualData.forEach(function (element)
serviceId_ActualData = element.serviceId;
let checkAvailability = serviceId_DataFromServer_Array.some(serviceId => serviceId_ActualData === serviceId);
if (checkAvailability === false)
toRemove.push(element);
ActualData.splice(ActualData.indexOf(element), 1); // THIS ROW REMOVE OBJECT FROM MAIN ARRAY*


);


Function to push/remove collections to/from main array*

function DisplayRefreshedData()
if (toAdd.length > 0)
self.services.push(toAdd);
toAdd.splice(0, toAdd.length);

if (toRemove.length > 0) //
self.services.remove(toRemove); // THIS SHOULD REMOVE IT AND CHANGE THE PAGE CONTENT
toRemove.splice(0, toRemove.length); //


setInterval(DisplayRefreshedData, 60000);


Second problem is adding. It does add service to main array correctly but it display it twice on the page. When I don't clear toAdd colection, it display two same services on dashboard, when I do it display just one and one error that service is not defined.
In this case I have no Idea where is the problem, so I will give you whole JavaScript code for sure.:/

function ServicesViewModel()
var self = this;

self.services = ko.observableArray();
self.lastCheck = ko.observable();
var ActualData = ;
var DataFromServer = ;
var toAdd = ;
var toRemove = ;

$.getJSON("http://localhost:55972/api/status", function (data)
self.services(data.services);
self.lastCheck = data.lastCheck; // FIRST LOAD WHEN PAGE IS LOADED
ActualData = data.services;
DataFromServer = data.services;
);

function DashboardRefresh()
var serviceId_ActualData_Array = ;
var serviceId_DataFromServer_Array = ;

$.getJSON("http://localhost:55972/api/status", function (data)
DataFromServer = data.services;
);

ActualData.forEach(function (element)
serviceId_ActualData_Array.push(element.serviceId);
);

DataFromServer.forEach(function (element) // THIS LOADING DATA TO toAdd COLECTION
serviceId_DataFromServer = element.serviceId;
serviceId_DataFromServer_Array.push(element.serviceId);
let checkAvailability = serviceId_ActualData_Array.some(serviceId => serviceId_DataFromServer === serviceId);
if (checkAvailability === false)
toAdd.push(element);
ActualData.push(element);


);

ActualData.forEach(function (element)
serviceId_ActualData = element.serviceId;
let checkAvailability = serviceId_DataFromServer_Array.some(serviceId => serviceId_ActualData === serviceId);
if (checkAvailability === false)
toRemove.push(element);
ActualData.splice(ActualData.indexOf(element), 1); // THIS ROW REMOVE OBJECT FROM MAIN ARRAY*


);


setInterval(DashboardRefresh, 1000);

function DisplayRefreshedData()
if (toAdd.length > 0)
self.services.push(toAdd); // ADDING DATA TO MAIN ARRAY*
toAdd.splice(0, toAdd.length);

if (toRemove.length > 0) //
self.services.remove(toRemove); // THIS SHOULD REMOVE IT AND CHANGE THE PAGE CONTENT
toRemove.splice(0, toRemove.length); //


setInterval(DisplayRefreshedData, 60000);



ko.applyBindings(new ServicesViewModel());


lastCheck

self.lastCheck(data.lastCheck)

1 Answer
1

You are pushing references to the toAdd and toRemove arrays, not adding/removing their individual values.

toAdd

toRemove

To remove all values from an array, you can use ko.observableArray.fn.removeAll.

ko.observableArray.fn.removeAll

To add multiple values you can choose any of:

obsArray.push(...toAdd);

obsArray(obsArray().concat(toAdd));

obsArray.push.apply(obsArray, toAdd);

toAdd.forEach(x => obsArray.push(x))

const toAdd = [ 1, 2, 3, 4, 5];
const toRemove = [ 2, 3, 4 ];

const obsArray = ko.observableArray();
console.log("obsArray before mutations:", obsArray());

obsArray.push.apply(obsArray, toAdd);
console.log("obsArray after add:", obsArray());

obsArray.removeAll(toRemove);
console.log("obsArray after remove:", obsArray());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy