I have two arrays:

//list elements from html
var list = document.querySelectorAll('#pres-list-ul li');
//list of retrieved objects from api
var objects = self.retrievedItems;

The contents of list is saved on a html file for efficiency (no need to re-render same data unless you refresh)

I want to remove a list item from the html if it doesn't exist anymore in the retrieved objects.

I know it is somewhere along the lines of the code below but I couldn't work it out.

//I need to pare the id? For that another loop - which will run hundreds and thousands of time?
for(var j = 0; j < objects.length; j++) {
  if(objects.indexOf(list[i]) === -1) {
    //false
  } else {
    //true
  }
}

Scenario:

list:  57 //local
objects:  56 //online

Find that extra value in list and remove it.

List:

<li id="item-5756" data-category="" data-group="" data-created="" data-author=""></li>

Object:

0: {
  id: //
  title: //
  description //
  // ...
}

1: {
  //...
}

I have two arrays:

//list elements from html
var list = document.querySelectorAll('#pres-list-ul li');
//list of retrieved objects from api
var objects = self.retrievedItems;

The contents of list is saved on a html file for efficiency (no need to re-render same data unless you refresh)

I want to remove a list item from the html if it doesn't exist anymore in the retrieved objects.

I know it is somewhere along the lines of the code below but I couldn't work it out.

//I need to pare the id? For that another loop - which will run hundreds and thousands of time?
for(var j = 0; j < objects.length; j++) {
  if(objects.indexOf(list[i]) === -1) {
    //false
  } else {
    //true
  }
}

Scenario:

list:  57 //local
objects:  56 //online

Find that extra value in list and remove it.

List:

<li id="item-5756" data-category="" data-group="" data-created="" data-author=""></li>

Object:

0: {
  id: //
  title: //
  description //
  // ...
}

1: {
  //...
}

• javascript
• arrays
• loops

• You're trying to find the intersection of two lists? And are the items unique in each list? – Joe Commented Oct 11, 2016 at 12:59
• 1 Could you post samples of both list and objects. – Martin Gottweis Commented Oct 11, 2016 at 13:00
• stackoverflow./questions/1885557/… – dstarh Commented Oct 11, 2016 at 13:02
• @MartinGottweis samples added. – Abdul Sadik Yalcin Commented Oct 11, 2016 at 13:13
• @Joe Yes they are unique - no duplicates or falsy values. I guess intersection is what I'm looking for! – Abdul Sadik Yalcin Commented Oct 11, 2016 at 13:31

4 Answers 4

You can to use filter and check if arrays match:

var array1 = [1,2,3,4,5,6,7,8,9],
    array2 = [1,2,3,4,5,6,7,8,9,10],
    result = [];

result = array2.filter(function(item){
  if ( array1.indexOf(item) !== -1 ) return item;
});

console.log(result);

In your case, to pare the objects inside the array, it's possible using Lodash, something like:

var array1 = [{'id': 1,'title': 'Test','description': 'Test'}, {'id': 2,'title': 'Test','description': 'Test'}, {'id': 3,'title': 'Test','description': 'Test'}],
    array2 = [{'id': 1,'title': 'Test','description': 'Test'}, {'id': 12,'title': 'Test','description': 'Test'}, {'id': 3,'title': 'Test','description': 'Test'}],
    result = [];

array2.forEach(function(item1){
  array1.forEach(item2 =>{     
    if ( _.isEqual(item1, item2) ){
      result.push(item2);  
    }
  });
});

console.log(result);

<script src="https://cdn.jsdelivr/lodash/4.16.4/lodash.min.js"></script>

First you have to somehow align the data. I suggest you get rid of the id="item-5756" for the items. Use data-id="5756" instead. After you have list of ids for local and remote, you can do what you suggested with the indexOf and just hide the local elements that are not in remote.

Check it out here: https://jsfiddle/jrwyopvs/

var remote_data = {
    5756: {
        id: 5756,
        title: '',
        description: '',
    },
    5757: {
        id: 5757,
        title: '',
        description: '',
    },
    5758: {
        id: 5758,
        title: '',
        description: '',
    },
}

$(document).on('click', '.filter', filter_local)

function filter_local () {
    var local_ids = $('#pres-list-ul li').toArray().map(function (element) { return $(element).data('id') })
    var remote_ids = []
    for (remote_index in remote_data) {
        remote_ids.push(remote_data[remote_index].id)
    }
    console.log(local_ids, remote_ids)

    for (local_id in local_ids) {
        if (remote_ids.indexOf(local_ids[local_id]) == -1) {
            $('#pres-list-ul li[data-id="' + local_ids[local_id] + '"]').hide()
        }
    }
}

Note that there are several ways for improvement:

Better filtering algorithm: What I suggested has pretty bad efficiency. The ids can be sorted and filtered in one go. The lookup with [data="5678"] is rather slow as well.

Using data binding: Consider using angular or some other mvc framework to make your project maintainable. This way you can just keep track of one list of elements and let angular figure out the re-rendering.

Also with find inside a filter :

var list = [1,2,3,4,5,6,7,8,9];
var objects = [1,2,5,6,9,10,11,12,13,14];
var result = list.filter(item => objects.find(element => element === item));
console.log(result); //[ 1, 2, 5, 6, 9 ]

if BaseArray is arr1 and receive from server is arr2, you must do a loop on arr1 and if not found in arr2 not push to arrOut.

var arr1=["abc","cde","efg","xyz"];
var arr2=["abc","cde","efg"];
var arrOut=[];
for(var i=0;i<arr1.length;i++){
    var out=arr2.find(function(element, index, array){return element===arr1[i];});
    if(out!=undefined){
        arrOut.push(out);
    }
}

then arrOut is what you want.