Javascript 如何实现基于嵌套数组的用户界面？

我有一个带有一些动态值的数组，它将具有数组的数组，并且根据内部数组长度需要显示或文本

示例：

const renderArr = [
  {
    label: "Abc",
    value: []
  },
  {
    label: "XyZ",
    value: ["Test", "Exam"]
  },
  {
    label: "Dex",
    value: []
  },
  {
    label: "Mno",
    value: ["Momo", "Pizza"]
  },
  {
    label: "Pqr",
    value: []
  }
];

I want to show OR condition based on below condition

let currentValue = renderArr[index].value.length > 0 then

If nextValue = renderArr[index+1].value.length > 0 then show OR condition, NOTE: it'll check till it not found the value.length > 0 for every index

shouldShowNextOr = (value, rootIndex) => {
    let shouldShow = false;
    let f = renderArr;
    if (rootIndex < 4) {
      switch (rootIndex) {
        case 0:
          shouldShow =
            f[1].value.length > 0 ||
            f[2].value.length > 0 ||
            f[3].value.length > 0 ||
            f[4].value.length > 0
              ? true
              : false;
          break;
        case 1:
          shouldShow =
            f[2].value.length > 0 ||
            f[3].value.length > 0 ||
            f[4].value.length > 0
              ? true
              : false;
          break;
        case 2:
          shouldShow =
            f[3].value.length > 0 || f[4].value.length > 0 ? true : false;
          break;
        case 3:
          shouldShow = f[4].value.length > 0 ? true : false;
          break;
        default:
          shouldShow = false;
      }
    }

    return shouldShow;
  };

JSON数据：

const renderArr = [
  {
    label: "Abc",
    value: []
  },
  {
    label: "XyZ",
    value: ["Test", "Exam"]
  },
  {
    label: "Dex",
    value: []
  },
  {
    label: "Mno",
    value: ["Momo", "Pizza"]
  },
  {
    label: "Pqr",
    value: []
  }
];

I want to show OR condition based on below condition

let currentValue = renderArr[index].value.length > 0 then

If nextValue = renderArr[index+1].value.length > 0 then show OR condition, NOTE: it'll check till it not found the value.length > 0 for every index

shouldShowNextOr = (value, rootIndex) => {
    let shouldShow = false;
    let f = renderArr;
    if (rootIndex < 4) {
      switch (rootIndex) {
        case 0:
          shouldShow =
            f[1].value.length > 0 ||
            f[2].value.length > 0 ||
            f[3].value.length > 0 ||
            f[4].value.length > 0
              ? true
              : false;
          break;
        case 1:
          shouldShow =
            f[2].value.length > 0 ||
            f[3].value.length > 0 ||
            f[4].value.length > 0
              ? true
              : false;
          break;
        case 2:
          shouldShow =
            f[3].value.length > 0 || f[4].value.length > 0 ? true : false;
          break;
        case 3:
          shouldShow = f[4].value.length > 0 ? true : false;
          break;
        default:
          shouldShow = false;
      }
    }

    return shouldShow;
  };

根据上述结构，renderar[]中有值。value和renderar[]中有值。所以我需要在UI中显示它们之间的“或”文本

预期逻辑：

const renderArr = [
  {
    label: "Abc",
    value: []
  },
  {
    label: "XyZ",
    value: ["Test", "Exam"]
  },
  {
    label: "Dex",
    value: []
  },
  {
    label: "Mno",
    value: ["Momo", "Pizza"]
  },
  {
    label: "Pqr",
    value: []
  }
];

I want to show OR condition based on below condition

let currentValue = renderArr[index].value.length > 0 then

If nextValue = renderArr[index+1].value.length > 0 then show OR condition, NOTE: it'll check till it not found the value.length > 0 for every index

shouldShowNextOr = (value, rootIndex) => {
    let shouldShow = false;
    let f = renderArr;
    if (rootIndex < 4) {
      switch (rootIndex) {
        case 0:
          shouldShow =
            f[1].value.length > 0 ||
            f[2].value.length > 0 ||
            f[3].value.length > 0 ||
            f[4].value.length > 0
              ? true
              : false;
          break;
        case 1:
          shouldShow =
            f[2].value.length > 0 ||
            f[3].value.length > 0 ||
            f[4].value.length > 0
              ? true
              : false;
          break;
        case 2:
          shouldShow =
            f[3].value.length > 0 || f[4].value.length > 0 ? true : false;
          break;
        case 3:
          shouldShow = f[4].value.length > 0 ? true : false;
          break;
        default:
          shouldShow = false;
      }
    }

    return shouldShow;
  };

下面是我的逻辑，它不能正常工作

我的逻辑：

const renderArr = [
  {
    label: "Abc",
    value: []
  },
  {
    label: "XyZ",
    value: ["Test", "Exam"]
  },
  {
    label: "Dex",
    value: []
  },
  {
    label: "Mno",
    value: ["Momo", "Pizza"]
  },
  {
    label: "Pqr",
    value: []
  }
];

I want to show OR condition based on below condition

let currentValue = renderArr[index].value.length > 0 then

If nextValue = renderArr[index+1].value.length > 0 then show OR condition, NOTE: it'll check till it not found the value.length > 0 for every index

shouldShowNextOr = (value, rootIndex) => {
    let shouldShow = false;
    let f = renderArr;
    if (rootIndex < 4) {
      switch (rootIndex) {
        case 0:
          shouldShow =
            f[1].value.length > 0 ||
            f[2].value.length > 0 ||
            f[3].value.length > 0 ||
            f[4].value.length > 0
              ? true
              : false;
          break;
        case 1:
          shouldShow =
            f[2].value.length > 0 ||
            f[3].value.length > 0 ||
            f[4].value.length > 0
              ? true
              : false;
          break;
        case 2:
          shouldShow =
            f[3].value.length > 0 || f[4].value.length > 0 ? true : false;
          break;
        case 3:
          shouldShow = f[4].value.length > 0 ? true : false;
          break;
        default:
          shouldShow = false;
      }
    }

    return shouldShow;
  };

shouldShowNextOr=（值，根索引）=>{
让shouldShow=false；
设f=渲染器；
if（rootIndex<4）{
开关（根索引）{
案例0：
应该显示=
f[1]。value.length>0||
f[2]。value.length>0||
f[3]。value.length>0||
f[4]。value.length>0
真的吗
：假；
打破
案例1：
应该显示=
f[2]。value.length>0||
f[3]。value.length>0||
f[4]。value.length>0
真的吗
：假；
打破
案例2：
应该显示=
f[3]。value.length>0 | | f[4]。value.length>0？真：假；
打破
案例3：
shouldShow=f[4]。value.length>0？true:false；
打破
违约：
shouldShow=false；
}
}
返回应显示；
};

这是

电流输出

预期产出

---

过滤

renderArray

（在我的示例中为

数据

），并删除

值为空的所有项目。渲染过滤后的数组，如果某个项不是最后一个（
i
），则可以在其后面渲染“或”：


const{usemo}=React；
常量App=（{data}）=>{
const filteredData=useMemo（（）=>data.filter（o=>o.value.length），[data]）；
返回(
{filteredData.map（（o，i）=>(
{o.label}={”“}
{o.value.join（“and”）}
{i
}
))}
);
};
const renderArr=[{“label”：“Abc”，“value”：[]}，{“label”：“XyZ”，“value”：[“Test”，“Exam”]}，{“label”：“Dex”，“value”：[]}，{“label”：“Mno”，“value”：[“Momo”，“Pizza”]}，{“label”：“Pqr”，“value”：[]}；
ReactDOM.render(
,
根
)
过滤
renderArray
（
数据
，在我的示例中），并删除所有
值为空的
数组项。渲染过滤后的数组，如果某个项不是最后一个（
i
），则可以在其后面渲染“或”：


const{usemo}=React；
常量App=（{data}）=>{
const filteredData=useMemo（（）=>data.filter（o=>o.value.length），[data]）；
返回(
{filteredData.map（（o，i）=>(
{o.label}={”“}
{o.value.join（“and”）}
{i
}
))}
);
};
const renderArr=[{“label”：“Abc”，“value”：[]}，{“label”：“XyZ”，“value”：[“Test”，“Exam”]}，{“label”：“Dex”，“value”：[]}，{“label”：“Mno”，“value”：[“Momo”，“Pizza”]}，{“label”：“Pqr”，“value”：[]}；
ReactDOM.render(
,
根
)
另一种方法是：将具有
值的
renderArray
的所有索引值存储在另一个数组中（
arr
）。检查
rootIndex
是否是
arr
的一部分

这是我的建议

})

输入：

const renderArr = [
  {
    label: "Abc",
    value: []
  },
  {
    label: "XyZ",
    value: ["Yes", "No"]
  },
  {
    label: "Dex",
    value: []
  },
  {
    label: "Mno",
    value: ["Hi","Hello"]
  },
  {
    label: "Pqr",
    value: ["Yes", "No"]
  }
];

Output:



XyZ = Yes and No
OR
Mno = Hi and Hello
OR
Pqr = Yes and No
 

另一种方法是：将具有
值的
renderArray
的所有索引值存储在另一个数组中（
arr
）。检查
rootIndex
是否是
arr
的一部分

这是我的建议

})

输入：

const renderArr = [
  {
    label: "Abc",
    value: []
  },
  {
    label: "XyZ",
    value: ["Yes", "No"]
  },
  {
    label: "Dex",
    value: []
  },
  {
    label: "Mno",
    value: ["Hi","Hello"]
  },
  {
    label: "Pqr",
    value: ["Yes", "No"]
  }
];

Output:



XyZ = Yes and No
OR
Mno = Hi and Hello
OR
Pqr = Yes and No
 

是否可以不删除所有值为空的项目？因为我将索引值用于不同的用途，所以我添加了一个包含原始索引的解决方案。是否可以不删除所有具有空值的项？因为我将索引值用于不同的用途，所以我添加了一个包含原始索引的解决方案。