Javascript 如何计算对象属性值并在“动态”按钮中显示独立值，以及如何为其指定单击事件

在这里，我动态地获取数据。我正在做的是显示动态数据，并用标记器放置数据。在显示动态地图之前，我很好，但在下面的问题中，我被卡住了，我不知道如何前进

动态数据：

{
    "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：在**状态下这里的0中的值我必须计算有多少个0和1

问题2：计数后，假设状态1包含3个人，如果0表示3个人分别，则所有3个人的姓名必须以按钮的形式（动态）显示

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

下面是我的动态标记代码

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

---

您可以使用

统计0和1的数量。减少
：


const输入={
“第2页”，
“数据”：[{
“id”：4，
“名字”：“夏娃”，
“姓氏”：“霍尔特”，
“lat”：“25.6599899”，
“液化天然气”：“45.36646”，
“状态”：“0”
},
{
“id”：5，
“名字”：“查尔斯”，
“姓”：“莫里斯”，
“lat”：“25.99899”，
“液化天然气”：“45.4646”，
“状态”：“1”
},
{
“id”：6，
“名字”：“特雷西”，
“姓氏”：“拉莫斯”，
“lat”：“25.2339899”，
“液化天然气”：“45.56664646”，
“状态”：“1”
}
]
}
const{zeroCount，oneCount}=input.data.reduce（{zeroCount=0，oneCount=0}={}，{status}）=>{
如果（状态=='0'）为零计数++；
如果（状态=='1'）oneCount++；
返回{zeroCount，oneCount}
}, {});
log（'zero:'+zeroCount+'，one:'+oneCount）您可以使用
统计零和一的数量。减少
：


const输入={
“第2页”，
“数据”：[{
“id”：4，
“名字”：“夏娃”，
“姓氏”：“霍尔特”，
“lat”：“25.6599899”，
“液化天然气”：“45.36646”，
“状态”：“0”
},
{
“id”：5，
“名字”：“查尔斯”，
“姓”：“莫里斯”，
“lat”：“25.99899”，
“液化天然气”：“45.4646”，
“状态”：“1”
},
{
“id”：6，
“名字”：“特雷西”，
“姓氏”：“拉莫斯”，
“lat”：“25.2339899”，
“液化天然气”：“45.56664646”，
“状态”：“1”
}
]
}
const{zeroCount，oneCount}=input.data.reduce（{zeroCount=0，oneCount=0}={}，{status}）=>{
如果（状态=='0'）为零计数++；
如果（状态=='1'）oneCount++；
返回{zeroCount，oneCount}
}, {});
log（'zero:'+zeroCount+'，one:'+oneCount）您可以通过参考下面的代码来实现这一点：

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
}

您可以通过参考我下面的代码来实现这一点：

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
}

好的，我的其他两个问题有什么解决方案吗？注意，问题应该是关于一件事，而不是三件事（问题不可能因为太宽泛而关闭）好的，我的其他两个问题有什么解决方案吗？注意，问题应该是关于一件事，而不是三件事（不太宽泛的问题可能会被关闭）在上面的函数addBtn中使用btn.onClick而不是element.onClick。可能是问题的原因！我在上面的函数addBtn中使用*ngFor创建按钮的任何方式使用btn.onClick而不是element.onClick。可能是问题的原因！我使用*ngFor创建按钮的任何方式