Managing several items within one function

Question

Managing several items within one function

I am working with a json file that contains similar data sets but different objects.

{
    "AP": [{
            "name": "Autogen Program"
        }, {
            "status": "Completed"
        }, {
            "start": "2014-05-05"
        }, {
            "end": "2014-05-05"
        }],
    "BP": [{
            "name": "Backend Program"
        }, {
            "status": "In Progress"
        }, {
            "start": "2014-05-05"
        }, {
            "end": ""
        }],
    "AP": [{
            "name": "Capital Program"
        }, {
            "status": "Pending"
        }, {
            "start": ""
        }, {
            "end": ""
    }]
}

I have developed a function to individually call each object.

$(function() {
    $.getJSON('http://localhost:8080/GChartServlet/data1.json', function(statusDataSet) {
        $.each(statusDataSet.AP, function(i, f) {
            var color;
            switch(f.status) {
                case "In Progress":
                    color = "yellow";
                    break;
                case "Pending": 
                    color = "red";
                    break;
                case "Completed": 
                    color = "green";
                    break;
            }

            $("#stat1").append(f.value).css('background-color', color);
        });
    });
});

I am wondering if it is possible to retrieve all the status values using a single function. Or, how can I separate the color case logic into a separate function in order to avoid repeating the switch statement for each function?

Maybe something like this:

$("#stat1").append(AP.status).css('background-color', color);
$("#stat2").append(BP.status).css('background-color', color);

javascript json

Answer 1

Answer №1

To embrace the principles of DRY (Don't Repeat Yourself), consider implementing a versatile wrapper function that can handle various types by passing arguments to specify the type to process and the element to append to.

Instead of using a switch statement, opt for a simple object mapper as the logic remains consistent across all cases, making a switch statement unnecessary.

function myFunction(type, elementToAppend){
    $.getJSON('http://localhost:8080/GChartServlet/data1.json', function(dataSet) {
        $.each(dataSet[type], function(i, item) {
            var colorMap = {
                "In Progress" : "yellow",
                "Pending"     : "red",
                "Completed"   : "green"
            };

            elementToAppend.append(
                $('<span />', { text : item.value })
                    .css('background-color', colorMap[item.status]);
            );
    });
}

Usage:

myFunction('AP', $('#stat1'));
myFunction('BP', $('#stat2'));

Answer 2

To embrace the principles of DRY (Don't Repeat Yourself), consider implementing a versatile wrapper function that can handle various types by passing arguments to specify the type to process and the element to append to.

Instead of using a switch statement, opt for a simple object mapper as the logic remains consistent across all cases, making a switch statement unnecessary.

function myFunction(type, elementToAppend){
    $.getJSON('http://localhost:8080/GChartServlet/data1.json', function(dataSet) {
        $.each(dataSet[type], function(i, item) {
            var colorMap = {
                "In Progress" : "yellow",
                "Pending"     : "red",
                "Completed"   : "green"
            };

            elementToAppend.append(
                $('<span />', { text : item.value })
                    .css('background-color', colorMap[item.status]);
            );
    });
}

Usage:

myFunction('AP', $('#stat1'));
myFunction('BP', $('#stat2'));

Answer 3

Answer №2

A potential solution could be creating a function as follows:

function getColorBasedOnStatus(status) {
  let color;
  
  switch(status) {
    case "In Progress":
      color = "yellow";
      break;
      
    case "Pending":
      color = "red";
      break;
      
    case "Completed":
      color = "green";
      break;
  }
  
  return color;
}

Answer 4

A potential solution could be creating a function as follows:

function getColorBasedOnStatus(status) {
  let color;
  
  switch(status) {
    case "In Progress":
      color = "yellow";
      break;
      
    case "Pending":
      color = "red";
      break;
      
    case "Completed":
      color = "green";
      break;
  }
  
  return color;
}

Answer 5

Answer №3

Below is a code snippet that can help you achieve your goal:

 var colorMap = {"In Progress": "yellow", "Pending": "red", "Completed": "green"};
 $("#taskStatus").append(task.status).css('background-color', colorMap[task.status]);

If you want to loop through all tasks, you can use the following approach:

 var statusColorMap = {"In Progress": "yellow", "Pending": "red", "Completed": "green"};
 $.getJSON('http://localhost:8080/TaskData/tasks.json', function(tasks) {
    $.each(tasks.tasksList, function(index, task) {
        if (task.status != undefined) {     
             $("#taskList").append(task.status).css('background-color', statusColorMap[task.status]);
        }
    });
  });

Feel free to reach out if you need any clarification or encounter any issues with the implementation.

I also recommend structuring your data in the format below for better readability and easier processing:

{
"task1": {
        "name": "Project Alpha",
        "status": "Completed",
        "start_date": "2022-01-01",
        "end_date": "2022-01-31"
    },
"task2": {
        "name": "Project Beta",
        "status": "In Progress",
        "start_date": "2022-02-01",
        "end_date": ""
    }
}

If you switch to this format, the function can be modified as shown below:

 var colors = {"In Progress": "yellow", "Pending": "red", "Completed": "green"};
 $(function() {
  $.getJSON('http://localhost:8080/TaskData/tasks.json', function(data) {
    $("#taskList").append(data.task1.status).css('background-color', colors[data.task1.status]);
  });
});

Answer 6

Below is a code snippet that can help you achieve your goal:

 var colorMap = {"In Progress": "yellow", "Pending": "red", "Completed": "green"};
 $("#taskStatus").append(task.status).css('background-color', colorMap[task.status]);

If you want to loop through all tasks, you can use the following approach:

 var statusColorMap = {"In Progress": "yellow", "Pending": "red", "Completed": "green"};
 $.getJSON('http://localhost:8080/TaskData/tasks.json', function(tasks) {
    $.each(tasks.tasksList, function(index, task) {
        if (task.status != undefined) {     
             $("#taskList").append(task.status).css('background-color', statusColorMap[task.status]);
        }
    });
  });

Feel free to reach out if you need any clarification or encounter any issues with the implementation.

I also recommend structuring your data in the format below for better readability and easier processing:

{
"task1": {
        "name": "Project Alpha",
        "status": "Completed",
        "start_date": "2022-01-01",
        "end_date": "2022-01-31"
    },
"task2": {
        "name": "Project Beta",
        "status": "In Progress",
        "start_date": "2022-02-01",
        "end_date": ""
    }
}

If you switch to this format, the function can be modified as shown below:

 var colors = {"In Progress": "yellow", "Pending": "red", "Completed": "green"};
 $(function() {
  $.getJSON('http://localhost:8080/TaskData/tasks.json', function(data) {
    $("#taskList").append(data.task1.status).css('background-color', colors[data.task1.status]);
  });
});

Managing several items within one function

Answer №1

Answer №2

Answer №3

Similar questions

Using jQuery's .html function to insert images

Are the commands overlapping?

Avoiding node_modules in Webpack 2 with babel-loader

Converting JSON to a std::string in C++ retrieved from a URL

Issue with querying and ordering products in Django using Python when passing values through the GET request

Encountering a BAD REQUEST error while attempting to access the Okta API from a C# MVC application

Performing an XMLHttpRequest to Submit an HTML Form

I implemented a proxy in my project to handle cross-domain requests, however, the requested address changes when I make a

Guide on implementing Regular Expressions in Directives for validation in Angular 8

What is the process for sending a complicated object to an MVC 4 controller using Ajax?

My type is slipping away with Typescript and text conversion to lowercase

The header row in HTML tables sometimes vanishes unexpectedly after sorting the table

A guide on utilizing webpack devServer proxy within a create react app

Determine the total number of nested objects within a JSON structure using Javascript

The attempt to connect with react-native-fetch-blob has not been successful

Javascript conditional testing

Updating items within a nested list in Redux can be achieved by carefully managing the state and implementing actions to add or remove

When attempting to send data from Ajax to PHP as JSON, an error occurs and the data transmission fails

Export all entries without taking into account pagination limits

combining the package.json files of the client and server into a single file