change row background color Jquery

Question

I have called a webapi and I got json data

{
    "orderId": 26,
    "userId": "53cf1e15",
    "user": {
    "editablePropertyNames": [],
        "email": "rajesh@tech.com",
        "firstName": "Rajesh",
        "id": "53cf1e15",
        "identities": [],
        "lastName": "kumar",
        "missingProperties": [],
        "phoneNumber": "45877298"
},
    "locationId": 4024,
    "pickupType": 1,
    "pickupTimeUtc": "2015-11-27T17:33:00.417"
},
{
    "orderId": 601,
    "userId": "06bf5983",
    "user": {
    "editablePropertyNames": [],
        "email": "rtest@wa.com",
        "firstName": "Rakesh",
        "id": "06bf5983",
        "identities": [],
        "lastName": "Pkumar",
        "missingProperties": [],
},
    "locationId": 424,
    "pickupType": 1,
    "pickupTimeUtc": "2016-11-16T21:30:00",
    "total": 4.32,
    "tax": 0.83
}

var PickupMethodEnum = _enum({
    DineIn: 1, DriveThru: 2, TakeOut: 3
})

index.html

I have 5 columns

#imageIndicator        Name      PickupName   Total          scheduledTime
car.png               Kumar          1          4.32    2015-11-27T17:33:00.417

my problem is

I want to display value instead of "1" in pickupName column. ( DineIn: 1, DriveThru: 2, TakeOut: 3).
show image in #imageindicaor column if pickupName ="DriveThru" otherwise hide the image.
show scheduledTime in custom format
1. if scheduledTime is current date then display as 12:15 pm.
2. if scheduled time is tomorrow date the display as 8/10 - 7:00am.
if pickupName ="TakeOut" then change that` row background color to gray and then remove that row after 2 minutes.

i have to clud first name and lst name in Name coloumn. – endeavour user Jan 01 '18 at 09:13 — endeavour user, Jan 01 '18 at 09:13

score 0 · Answer 1 · edited Jan 01 '18 at 09:45

0

I want to display value instead of "1" in pickupName column. ( DineIn: 1, DriveThru: 2, TakeOut: 3).

Object.keys( objectName )[ propertyIndex ]

will return the desired property's name

The rest of your issues can be resolved with conditional statements once you've obtained the JSON data. You haven't provided your attempt so there isn't much to work with.

edited Jan 01 '18 at 09:45

mplungjan

169,008
28
173
236

answered Jan 01 '18 at 09:31

HelloWorldPeace

1,315
13
12

my questions: 1) i want to show image (car.jpg) in my table "tblOrders" first column if PickupMethodEnum[item.pickupType] ="DriveThru" otherwise hide the image. 2) i want display Date(item.pickupTimeUtc, "dd-MM-yyyy") in custom format. 1)if scheduledTime is current date then display as 12:15 pm. 2) if scheduled time is tomorrow date the display as 8/10 - 7:00am. 3)if pickupName ="TakeOut" then change that` row background color to gray and then remove that row after 2 minutes. – endeavour user Jan 01 '18 at 17:33

score 0 · Answer 2 · answered Jan 01 '18 at 10:41

Hi for first point you need to write your enum properly numbers:"String" because you are getting numbers from JSON.

//Global Object
var pickupNameEnum = {
    0: "DineIn",
    1: "DriveThru",
    2: "TakeOut"
};

Write a function as showRow(singleRowObject) in which while traversing your JSON

function showRow(singleRowObject){
var imageString="";
var hideImage=false;
var showString='';
var retutnObject={};
if(pickupNameEnum[singleRowObject.pickupType]!=undefiend){
showString='DineIn';
//DineIn
}else if(singleRowObject.pickupType==){
//DriveThru
showString='DriveThru';
imageString="<img src='abc.png' alt='img'></img>";
}else if(singleRowObject.pickupType==){
//TakeOut and change Color on basis of this flag
hideImage=true;
showString='TakeOut ';

}
retutnObject.hideImage=hideImage;
retutnObject.imageString=imageString;
retutnObject.showString=showString;
}

For date split dateString and refer to this question

For Removing Row change refer this

change row background color Jquery

2 Answers2