change text using javascript on page load

Question

In my modal class PatientModel I have an attribute statusOfPatient whose values are {1, 2, 3, 4} such that
[(1, "normal"), (2, "referred"), (3, "critical"), (4, "ICU")]. In database values are integer type, but when I have to display the status of patient I have to show the description of the codes. How can I do this using javascript?
As soon as the page loads and shows the patient information it should show the description of the
statusOfPatient field. How can I do that using javascript?
I am new to asp.net mvc so having difficult in playing with javascript here.

Answer 1

Hi arsar-2618,

In my opinion, the best opinion for your scenario is building a new viewmodel when getting data from the database. Since the javascript is modifying the html element and it couldn't modifying the PatientModel, if you build some codes and method which could render the statusOfPatient with its value. But you need write a lot codes to find the js's element(Each page may contains the different element and you should call this method at window.onload method) and modify the element value according to the statusOfPatient attribute.

But if you build a new value and do these things inside the controller, you could just use the new property statusOfPatientNew which has already contains the right description.

If you still want to achieve this by using the JS, I suggest you could refer to below sample.

<h1 id="statusOfPatient">@Model.statusOfPatient</h1>  

JS:

        $(function () {  
            // get the id = test's statusOfPatient value, notice: Different element will use different way to get the value  
            var result;  
            var statusOfPatient = parseInt($("#statusOfPatient").html());  
            console.log(statusOfPatient);  
            switch (statusOfPatient) {  
                case 1: result = "normal";  
                    break;  
                case 2: result = "referred";  
                    break;  
                case 3: result = "critical";  
                    break;  
                case 4: result = "ICU";  
                    break;  
            };  
      
            $("#statusOfPatient").html(result);  
        });