Tips on Calculating the Number of Object Properties and Presenting Each Value Individually on a Dynamic Button with Click Event Attached

Question

Tips on Calculating the Number of Object Properties and Presenting Each Value Individually on a Dynamic Button with Click Event Attached

When it comes to displaying dynamic data with markers on a map, everything works fine up until this point. However, I've encountered some issues that I'm currently stuck on and not sure how to proceed.

Dynamic data:

{
    "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"

        }
    ]
}

Issue 1: Count the occurrences of 'Status' value being 0 and 1

Issue 2: After counting, if there are 3 people with Status 1, display individual buttons dynamically for each person; likewise for Status 0

Issue 3: Clicking on a specific button should trigger an info window to open on the map at the corresponding marker location

This is my Dynamic Marker Code:

 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;
      };
      
      // Additional marker code here...

javascript angular google-maps typescript

Answer 1

Answer №1

To achieve this functionality, you can refer to the code snippet provided below:

const inputData = {
    "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 statusZeroObjects  = inputData.data.filter(item => item.status === 0);
let statusOneObjects = inputData.data.filter(item => item.status === 1);

//To address Issue 1
const countOfStatus0 = statusZeroObjects.length;
const countOfStatus1 = statusOneObjects.length;

//To address Issue 2
//Add buttons for status zero in container0 div
statusZeroObjects.forEach(function(person) {
    addCustomButton('#container0', person);
});

//Add buttons for status one in container1 div
statusOneObjects.forEach(function(person){
    addCustomButton('#container1', person);
});

function addCustomButton(id, individual) {
    let button = document.createElement("input");
    button.type = button;
    button.name =  individual.first_name;
    button.onClick = addMapMarker(individual); //Functionality related to marker is not clear
    document.getElementById(id).appendChild(button);
}


// To handle Issue 3
const addMapMarker = function(individual) {
// Implement logic for map markers here
}

Answer 2

To achieve this functionality, you can refer to the code snippet provided below:

const inputData = {
    "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 statusZeroObjects  = inputData.data.filter(item => item.status === 0);
let statusOneObjects = inputData.data.filter(item => item.status === 1);

//To address Issue 1
const countOfStatus0 = statusZeroObjects.length;
const countOfStatus1 = statusOneObjects.length;

//To address Issue 2
//Add buttons for status zero in container0 div
statusZeroObjects.forEach(function(person) {
    addCustomButton('#container0', person);
});

//Add buttons for status one in container1 div
statusOneObjects.forEach(function(person){
    addCustomButton('#container1', person);
});

function addCustomButton(id, individual) {
    let button = document.createElement("input");
    button.type = button;
    button.name =  individual.first_name;
    button.onClick = addMapMarker(individual); //Functionality related to marker is not clear
    document.getElementById(id).appendChild(button);
}


// To handle Issue 3
const addMapMarker = function(individual) {
// Implement logic for map markers here
}

Answer 3

Answer №2

To tally the number of zeros and ones in an array, you can use the .reduce method:

const input = {
  "page": 2,
  "data": [{
      "id": 5,
      "first_name": "Alice",
      "last_name": "Smith",
      "lat": "25.6599899",
      "lng": "45.3664646",
      "status": "0"
    },
    {
      "id": 6,
      "first_name": "Bob",
      "last_name": "Johnson",
      "lat": "25.99899",
      "lng": "45.4646",
      "status": "1"
    },
    {
      "id": 7,
      "first_name": "Eve",
      "last_name": "Williams",
      "lat": "25.2339899",
      "lng": "45.56664646",
      "status": "1"

    }
  ]
}
const { zeroCount, oneCount } = input.data.reduce( ({ zeroCount = 0, oneCount = 0 } = {}, { status }) => {
  if (status === '0') zeroCount++;
  if (status === '1') oneCount++;
  return { zeroCount, oneCount }
}, {});
console.log('Total Zeros: ' + zeroCount + ', Total Ones: ' + oneCount);

Answer 4

To tally the number of zeros and ones in an array, you can use the .reduce method:

const input = {
  "page": 2,
  "data": [{
      "id": 5,
      "first_name": "Alice",
      "last_name": "Smith",
      "lat": "25.6599899",
      "lng": "45.3664646",
      "status": "0"
    },
    {
      "id": 6,
      "first_name": "Bob",
      "last_name": "Johnson",
      "lat": "25.99899",
      "lng": "45.4646",
      "status": "1"
    },
    {
      "id": 7,
      "first_name": "Eve",
      "last_name": "Williams",
      "lat": "25.2339899",
      "lng": "45.56664646",
      "status": "1"

    }
  ]
}
const { zeroCount, oneCount } = input.data.reduce( ({ zeroCount = 0, oneCount = 0 } = {}, { status }) => {
  if (status === '0') zeroCount++;
  if (status === '1') oneCount++;
  return { zeroCount, oneCount }
}, {});
console.log('Total Zeros: ' + zeroCount + ', Total Ones: ' + oneCount);

Tips on Calculating the Number of Object Properties and Presenting Each Value Individually on a Dynamic Button with Click Event Attached

Answer №1

Answer №2

Similar questions

Having trouble getting SVG animations to work properly when using the static folder in Parcel?

Is there a way to automatically update the button text based on the route name without requiring user interaction?

I consistently encounter the error message 'XRWebGLLayer is not defined no-undef' while implementing three.js within react.js to develop a WebXR application

Guide to correctly passing custom parameters along with the event object to an asynchronous form submission handler

What is the best way to retrieve recently inserted data using Sequelize in PostgreSql?

Change the background color of a span element dynamically

Attempting to send an AJAX request to a different server (not functioning with the provided example)

jQuery is unable to manipulate newly added DOM elements that have been loaded via AJAX

What is the best way to create a generic array and combine properties?

An efficient method for removing a column using JavaScript

What steps should I take to address this 'key' alert?

Updating nested forms in Angular 4

Including additional data to a page after each iteration in order to display the current progress

The absence of a closing parentheses in the argument is causing an issue when rendering

Displaying and concealing a div based on the scroll position

Unable to determine all parameters for Modal: (?, ?, ?)

Adding text chips to a text field in Vuetify - A simple guide

Experimenting with viewProvider in a component test

Angular's interactive checkboxes and dropdown menus provide a dynamic user experience

Failed to install @ngrx/store due to unforeseen issues