Javascriptを - それは私が二つの配列持つ別の

Question

に存在しない場合は、配列から値を削除します。リストの

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

内容は効率（同じデータを再レンダリングする必要はありません用のHTMLファイルに保存されます

検索されたオブジェクトにリスト項目が存在しない場合は、削除する必要があります。

私はそれが以下のコードの行のどこかにあることは知っていますが、うまくいかないことがあります。

//I need to compare 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 
    } 
} 

シナリオ：

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

は、リスト内の余分な値を見つけ、それを削除。

一覧：

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

オブジェクト：

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

1: { 
    //... 
} 

Answer 1

何らかの形でデータを整列させる必要があります。私はあなたが項目のid="item-5756"を取り除くことをお勧めします。代わりにdata-id="5756"を使用してください。ローカルとリモートのIDリストを取得したら、indexOfで提案した内容を実行し、リモートにないローカル要素を非表示にすることができます。

ここでそれをチェックアウト：改善のためのいくつかの方法があることhttps://jsfiddle.net/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() 
     } 
    } 
} 

注：

ベター・フィルタリング・アルゴリズム：私は何を提案することはかなり悪い効率を有します。 1つのIDをソートしてフィルタリングすることができます。 [data="5678"]のルックアップはやや遅いです。

データバインディングを使用する：プロジェクトをメンテナンス可能にするために、角型またはその他のmvcフレームワークの使用を検討してください。こうすることで、要素のリストを1つだけ追跡して、角度の再計算を再描画することができます。

Answer 2

あなたは filterを使用すると配列が一致するかどうかをチェックすることができます

：

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);

あなたのケースでは、配列内のオブジェクトを比較するために、それはLodashを使用して可能だ、のようなもの：

フィルター内部の検索でも

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.net/lodash/4.16.4/lodash.min.js"></script>

Answer 3

：

まず

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 ] 

Answer 4

BaseArrayがarr1でサーバからの受信がarr2の場合、arr1にループを実行し、arr2に見つからない場合は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); 
    } 
} 

その後arrOutは、あなたが望むものです。