javascript - 如何计算对象属性值并在动态按钮中显示单独的值并将单击事件分配给它们

Question

在这里，我动态获取数据，我正在做的是显示动态数据并将数据与标记一起放置。直到显示动态 map 我很好，但在以下问题中我陷入困境，我不知道如何前进

动态数据:

{
    "page": 2,

    "data": [
        {
            "id": 4,
            "first_name": "Eve",
            "last_name": "Holt",
            "lat":"25.6599899",
            "lng":"45.3664646",
            "status":"0"

        },
        {
            "id": 5,
            "first_name": "Charles",
            "last_name": "Morris",
            "lat":"25.99899",
            "lng":"45.4646",
             "status":"1"

        },
        {
            "id": 6,
            "first_name": "Tracey",
            "last_name": "Ramos",
            "lat":"25.2339899",
            "lng":"45.56664646",
            "status":"1"

        }
    ]
}

问题 1:在 **Status 中，0 中的值我必须计算有多少个 0 和 1

问题2:统计后假设如果状态1为包含3人，那么所有3人的名字都必须以按钮的形式(动态)单独显示，如果0表示单独一个

问题 3 创建动态按钮后，如果我单击具有某个名称的按钮，则必须在 map 上显示一个信息窗口，其中包含已与该人放置的指定标记**

下面是我的动态标记代码

    addMarker(latlng, mapobj, markerLabel,iconColor) {

          this.iconDisplay =[];

         if(iconColor === "0"){
            this.iconDisplay = this.red;

         }else if(iconColor === "1"){
             this.iconDisplay = this.green;

         }else if(iconColor === "2"){
             this.iconDisplay = this.orange;

         }else if(iconColor === "3"){
          this.iconDisplay = this.building;
      };


        var marker = new google.maps.Marker({
          //zoom:this.zoomlevel,
          position: latlng,
          map: mapobj,
          icon:this.iconDisplay

        });

      debugger
        mapobj.setCenter(latlng);

        mapobj.setZoom(parseInt(localStorage.getItem('getz')));


        mapobj.addListener('zoom_changed', function() {
          mapobj.getZoom();
          localStorage.setItem('getz',mapobj.getZoom());
        });

    const infowindow = new google.maps.InfoWindow({
      content: markerLabel
    });

    google.maps.event.addListener(marker, 'click', function() {
     //infowindow1.open(Map,marker);

    });

    google.maps.event.addListener(marker,'mouseover', function() {
      infowindow.open(Map,marker);
  });

  google.maps.event.addListener(marker,'mouseout', function() {
    infowindow.close();
});

  //This is for by default opening infowindow
    // infowindow.open(Map, marker);

    const styless = [
      {
        "featureType": "poi.attraction",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },

      {
        "featureType": "poi.medical",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "poi.park",
        "elementType": "labels.text",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "poi.place_of_worship",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "poi.school",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "poi.sports_complex",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      }
    ]

    mapobj.setOptions({styles: styless});
    // This is for set postion for the marker after getting dynamic data it posittions to the point

  mapobj.panTo(marker.position);

Answer 1

您可以通过引用下面的代码来实现此目的:

const input = {
    "page": 3,
    "data": [{
        "id": 1,
        "first_name": "Niraj",
        "last_name": "Paudel",
        "lat": "454.454",
        "lng": "454545",
        "status": "0"
    },
    {
        "id": 2,
        "first_name": "Kushal",
        "last_name": "Shrestha",
        "lat": "235.99899",
        "lng": "452.4646",
        "status": "1"
    },
    {
        "id": 3,
        "first_name": "Ritesh",
        "last_name": "Sainju",
        "lat": "253.3439899",
        "lng": "423.56664646",
        "status": "1"

    }
    ]
}


let statusZeroObj  = input.data.filter(e => e.status === 0);
let statusOneObj = input.data.filter(e => e.status === 1);

//Issue 1
const countOfStatus0 = statusZeroObj.length;
const countOfStatus1 = statusOneObj.length;

//Issue 2
//suppose you need to append button with name "for status zero" in div id container0
statusZeroObj.forEach(function(statusZeroPerson) {
    addBtn('#container0', statusZeroPerson);
});

//suppose you need to append button with name "for status one" in div id container1
statusOneObj.forEach(function(statusOnePerson){
    addBtn('#container1', statusOnePerson);
});

function addBtn(id, person) {
    let btn = document.createElement("input");
    btn.type = button;
    btn.name =  person.first_name;
    btn.onClick = addMarker(person); //I am not totally sure what you want to do with marker
    document.getElementById(id).appendChild(btn);
}


// Issue 3
const addMarker = function(person) {
// implement the logic for marker
}