JSON Object to Array Javascript Lodash解析

Question

我有以下JSON

  {
    SYS1_DATA: "s-1,s2,s3,\ns-4,s-5,s-6,s-7",
    SYS2_DATA: "s1,s2,s3,\ns4,s5,s6,s7",
    COMPARE: [
      {
        cell_no: 2,
        line_no: 0
      },
      {
        cell_no: 3,
        line_no: 1
      },
      {
        cell_no: 4,
        line_no: 1
      }
    ]
  },
  {
    SYS1_DATA: "cs-1,cs2,cs3,\ncs-4,cs-5,cs-6,cs-7",
    SYS2_DATA: "cs1,cs2,cs3,\ncs4,cs5,cs6,cs7",
    COMPARE: [
      {
        cell_no: 2,
        line_no: 1
      }
    ]
  }
];

在这里，我的要求是解析这个对象，并从比较引用中将特定的单元格突出显示回UI。(这类似于DIFF功能，但更符合特定需求)

用例是- Syn1data和Sync2data两者我都需要比较，并且有一个可能的列表(在JSON中共享)，情况1:将所有数据隐蔽的syn1data和sync2data解析到数组，并突出显示具有单元格no和来自行no的特定单元格(从比较数组中选取此信息)。案例2:预期输出将如下例所示

SYS1_DATA: "s-1,s2,s3,\n<span class='error'>s-4</span>,s-5,s-6,s-7",
SYS2_DATA: "s1,s2,s3,\n<span class='error'>s4</span>,s5,s6,s7",

以显示不同的单元格值。这是我的进程内codexandbox链接-> https://codesandbox.io/s/logic-1-6bkgs?file=/src/index.js

这里有没有我可以使用的库呢？谢谢

Answer 1

这不是微不足道的

​

const data = [{ SYS1_DATA: "s-1,s2,s3,\ns-4,s-5,s-6,s-7", SYS2_DATA: "s1,s2,s3,\ns4,s5,s6,s7", COMPARE: [{ cell_no: 2, line_no: 0 }, { cell_no: 3, line_no: 1 }, { cell_no: 4, line_no: 1 } ] }, { SYS1_DATA: "cs-1,cs2,cs3,\ncs-4,cs-5,cs-6,cs-7", SYS2_DATA: "cs1,cs2,cs3,\ncs4,cs5,cs6,cs7", COMPARE: [{ cell_no: 2, line_no: 0 }] } ]; 

const processLines = (sys, compare) =>
  sys.split("\n")
  .map((line, i) => line
    .split(",")
    .map(
      (cell, j) => compare.find(o => o.line_no === i && o.cell_no === j) ?
        `<span>${cell}</span>` : cell
    )
  );

const process = (sys1, sys2, compare) => {
  sys1 = processLines(sys1, compare)//.flat();
  sys2 = processLines(sys2, compare)//.flat();
  return {
    sys1: sys1,
    sys2: sys2
  }

};

const res = data.map(item => process(item.SYS1_DATA, item.SYS2_DATA, item.COMPARE))


console.log(res)

​