如何用JavaScript实现JSON数据中AssessingStatus字段值的条件颜色替换？

前端javascript数据处理与颜色替换

本文将探讨如何使用javascript处理json数据，并根据特定条件将数据中的值替换为带有颜色标识的值。 问题源于一个json数组，包含多个对象，每个对象代表一位评估员的信息，其中assessingstatus字段的值需要根据特定逻辑进行替换，并用颜色进行视觉区分。 下文将详细解释如何实现这一目标。

题目中给出的json数据结构如下：

"assessingofficer": [
    {
        "assessingofficername": "卡特琳娜",
        "assessingstatus": 1,
        "assessingofficertype": 1,
        "datatime": "2024-04-09 17:12:04",
        "remarks": "我们在一起",
        "username": "卡特琳娜"
    },
    {
        "datatime": "2024-04-09 17:07:17",
        "remarks": "222222222222",
        "username": "卡特琳娜",
        "assessingofficername": "卡特琳娜",
        "assessingstatus": 2,
        "assessingofficertype": 2
    },
    {
        "datatime": "2024-04-09 17:07:33",
        "remarks": "22222222222222",
        "username": "卡特琳娜",
        "assessingofficername": "卡特琳娜",
        "assessingstatus": 2,
        "assessingofficertype": 2
    }
]

目标是将assessingstatus的值为1的替换成用红色显示的另一个值（例如，3）。 然而，提供的答案代码并没有直接实现颜色替换，而是专注于根据前一个assessingstatus的值来修改当前assessingstatus的值。 这部分代码展示了如何遍历数组，并根据特定的逻辑修改assessingstatus的值：

考拉新媒体导航

考拉新媒体导航——新媒体人的专属门户网站

下载

const assessingOfficer = [
  {
    AssessingStatus: 2,
  },
  {
    AssessingStatus: 2,
  },
  {
    AssessingStatus: 1,
  },
  {
    AssessingStatus: 1,
  },
  {
    AssessingStatus: 2,
  },
  {
    AssessingStatus: 2,
  },
  {
    AssessingStatus: 2,
  },
];

var assessingOfficerArr = assessingOfficer.map((el) => el.AssessingStatus);

var deepAssessingOfficerArr = JSON.parse(JSON.stringify(assessingOfficerArr));

for (let i = 0; i < deepAssessingOfficerArr.length; i++) {
  if (i === 0)
    assessingOfficerArr[0] = deepAssessingOfficerArr[0] === 1 ? 3 : deepAssessingOfficerArr[0];
  if (i > 0)
    assessingOfficerArr[i] =
      deepAssessingOfficerArr[i] === 1
        ? 3
        : deepAssessingOfficerArr[i - 1] === 1
        ? 1
        : deepAssessingOfficerArr[i];
}

console.log('assessingOfficerArr', assessingOfficerArr);

这段代码的核心逻辑在于迭代数组，并根据条件修改assessingstatus的值。 要实现颜色替换，需要在渲染到页面时，结合css样式，根据assessingstatus的值来设置文本颜色。 例如，可以使用三元运算符或switch语句在渲染阶段根据assessingstatus的值动态添加css类名来改变文本颜色。

立即学习“Java免费学习笔记（深入）”；