Question

我想从嵌套数组中过滤出已经过滤的项目，但是我不想删除以前的过滤器。

我最初是这样定义数组的：

markers1 = [
    ['0', '15 Smith Ct', 50.472711, -3.540386, 'Dartington', 'House', 'http://google.com/',
     'https://www.msvhousing.co.uk/images/properties/for-rent/609/khubsuret%20compressed.jpg'],
    ['1', '27 Clobells', 50.424091, -3.832449, 'Dartington', 'Bungalow', 'http://google.com',
     'https://images.unsplash.com/photo-1480074568708-e7b720bb3f09?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80'],
    ['2', '155 Churchill Rd', 51.011143, -4.195814, 'Bideford', 'Flat', 'http://google.com',
     'https://images.unsplash.com/photo-1449844908441-8829872d2607?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80'],
    ['3', 'Dennis Camp Rd', 50.431930, -4.121285, 'Plymouth', 'Bungalow', 'http://google.com',
     'https://images.unsplash.com/photo-1552903023-dc7b4c9fa5bf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60']
];

然后按如下所示分配内容：

function addMarker(marker) {
    var title = marker[1];
    var pos = new google.maps.LatLng(marker[2], marker[3]);
    var location = marker[4];
    var property = marker[5];
    var link = marker[6];
    var image = marker[7]

    marker1 = new google.maps.Marker({
        title: title,
        position: pos,
        location: location,
        map: map,
        property: property,
        link: link,
        image: image
    });

然后我的过滤器的工作方式如下：

filterMarkers = function (location) {
    // clear div x
    document.getElementById("x").innerHTML = " ";
    for (i = 0; i < markers1.length; i++) {
        marker = gmarkers1[i];
        // If is same location or location not picked
        if (marker.location == location || location.length === 0) {
            document.getElementById('x').innerHTML += "<div class='col-sm col-md-4 mt-5 mt-lg-0'><img class='w-100 mt-5' src=" + marker.image + " style='max-height:200px' ><br><div class='display-6 my-3 ml-3'>" 
            + marker.title + "</div><a class='lead ml-3' href='" + marker.link + "'>View more about this property</a></div>";
            marker.setVisible(true);
        }
        // locations don't match 
        else {
            marker.setVisible(false);
        }
    }
}

然后还有另一个工作原理完全相同，但是在数组的不同部分。

因此，这可以过滤位置（Dartington，Bideford和Plymouth），这很好。但是一旦完成，我现在想过滤Dartington中的房屋类型，例如，仅输出Dartington中的房屋。

希望这是有道理的，如果没有请让我知道，并且如果在其他地方都没有找到答案，那么我将不胜感激，如果您能向我指出正确的方向，我将不胜感激。

Answer 1

The filter() method creates a new array with all elements that pass the test implemented by the provided function.这里的更多信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

因此，您可以根据需要应用任意数量的过滤器。

您还可以这样链接它们：

const resultArray = array.filter(filterFunction1).filter(filterFunction2)

这将按照您定义的顺序应用过滤器。

Answer 2

仅说明原理。不必费心将其连接到实际的Google地图，但是可以保持不变。

// collection of markers
var marker_collection = [
  [ '0','15 Smith Ct', 50.472711, -3.540386, 'Dartington', 'House', 'http://google.com', 'https://www.msvhousing.co.uk/images/properties/for-rent/609/khubsuret%20compressed.jpg' ],
  ['1', '27 Clobells', 50.424091, -3.832449, 'Dartington', 'Bungalow', 'http://google.com',
'https://images.unsplash.com/photo-1480074568708-e7b720bb3f09?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80'],
  ['2', '155 Churchill Rd', 51.011143, -4.195814, 'Bideford', 'Flat', 'http://google.com',
'https://images.unsplash.com/photo-1449844908441-8829872d2607?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80'],
  ['3', 'Dennis Camp Rd', 50.431930, -4.121285, 'Plymouth', 'Bungalow', 'http://google.com',
'https://images.unsplash.com/photo-1552903023-dc7b4c9fa5bf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60']
];
// Inititally we start with all the markers, so we clone the full collection.
// Just use an empty array if you want to start with nothing.
// Since the inner arrays only contain strings and numbers, we can just slice those.
var clone_array = function( array ) {
  return array.map(function( marker ) {
    return marker.slice();
  });
};
var selected_markers = clone_array( marker_collection );
// Separate reusable function to render all makers.
// We will only use the selected_markers from now on for rendering
// And the marker_collection to reset back to everything.
var render = function( markers ) {
  var html = markers.map(function( marker ) {
    // Usign the array since we didn't create google maps objects.
    var image = marker[7];
    var title = marker[1];
    var link = marker[6];
    // var { image, title, link } = marker;
    return `<div class='col-sm col-md-4 mt-5 mt-lg-0'><img class='w-100 mt-5' src="${ image }" style='max-height:200px' ><br><div class='display-6 my-3 ml-3'>"${ title }"</div><a class='lead ml-3' href='"${ link }"'>View more about this property</a></div><button`; 
  });
  document.querySelector( 'main' ).innerHTML = html.join( '' );
};
// Add a filter function some way.
// Just using a button and a fixed location as an example.
// You'd get the location from whatever the user selected.
var filter = function( event ) {
  var location = 'Dartington';
  // filter the markers
  // When the markers are gogole objects instead of arrays, you'll use marker.location again instead of marker[4]
  var remaining_markers = selected_markers.filter(function( marker ) {
    return marker[4] === location;
  });
  // save the remaining markers so we can filter those again if needed.
  selected_markers = remaining_markers;
  // after filtering, rerender the remaining markers.
  render( selected_markers );
};
// add the filter event to the button
document.querySelector( '#filter' ).addEventListener( 'click', filter );
// reset the markers back to the original
// So we just do the same as before, clone the original array and then rerender.
var reset = function( event ) {
  selected_markers = clone_array( marker_collection );
  render( selected_markers );
};
// add the reset event to the button
document.querySelector( '#reset' ).addEventListener( 'click', reset );
// initial render upon startup
render( selected_markers );

<button id="filter">Filter</button>
<button id="reset">Reset</button>
<main></main>

我可以将过滤器应用于已过滤的项目（JavaScript）

2 个答案: