我想创建一个可以处理条件/分支的 JSON 对象。具体来说，我有如下工作流程:

对于第 1 步，用户有三个选择，根据他们做出的选择，他们会看到一组不同的第 2 步选择。相同的逻辑延伸到第 3 步，依此类推。

理想情况下，我希望所有这些数据都采用 JSON 格式，这样我就可以遍历它并根据用户的选择确定接下来需要向他们展示的选择。

有没有一种方法可以构建一个 JSON 对象(或者可能只是一个数组)，让我可以这样做？

我应该提一下，我希望它足够灵活，这样如果我以后决定更改某个步骤的选择数量，那么我所要做的就是修改 JSON 对象/数组 (模型)而无需修改循环遍历对象/数组的逻辑。

非常感谢。

最佳答案

您正在构建的本质上是一个树数据结构。我建议从原始节点对象构建它，而不是包含对相同类型的子对象的递归引用。仅使用这一种类型的对象即可完全实现树，其中“最顶层”对象称为根对象，所有用户都从此处开始进行选择。从根开始，用户选择子节点，直到到达没有子节点的叶节点，即从那里不能进行进一步的选择。

所有节点都是这样的对象:

{
    "label": "Choice A",
    "question": "Choose subselection?",
    "children": [ (array of more objects of the same type) ]
}

其中 label 是您要为此选项提供的名称/标签，question 是用户必须回答的下一个问题以选择下一个子节点，而 children 是更多相同类型节点的数组，其中每个子节点的 label是该节点的 question 的一个可能答案。

为了举例说明，让我们假设下面的选择树，可以在一个假想的在线零售店中询问，它只销售两种主要类型的产品:服装和食品。在服装区，有不同颜色的牛仔裤、T 恤和连帽衫(为简单起见，假设我们已经知道顾客的尺码。)商店还出售少量类型的帽子。在食物区，有拉面、不同口味的苏打水和香蕉。在服装区，顾客可以在他们的黑色T恤上印上电视节目或摇滚乐队的标志，或者只买一件没有标志的纯黑色T恤。电视节目的标志可以额外印在蓝色连帽衫上，或者客户可以选择购买没有标志的蓝色连帽衫。

因此，面向客户的答案/问题对的决策树如下:

A: <start>
Q: What product category?
|
|--A: Clothes
|  Q: What type of clothing?
|  |    
|  |--A: Jeans
|  |  Q: Color of jeans?
|  |  |
|  |  |--A: Blue
|  |  |  Q: <end>
|  |  |
|  |  |--A: Black
|  |  |  Q: <end>
|  |  |
|  |  \--A: White
|  |     Q: <end>
|  | 
|  |--A: Shirt
|  |  Q: Type of shirt?
|  |  |
|  |  |--A: T-shirt
|  |  |  Q: Color of T-shirt?
|  |  |  |
|  |  |  |--A: Red
|  |  |  |  Q: <end>
|  |  |  |
|  |  |  |--A: Green
|  |  |  |  Q: <end>
|  |  |  |
|  |  |  |--A: Black
|  |  |  |  Q: Logo?
|  |  |  |  |
|  |  |  |  |--A: Rock band
|  |  |  |  |  Q: <end>
|  |  |  |  |
|  |  |  |  |--A: TV show
|  |  |  |  |  Q: <end>
|  |  |  |  |
|  |  |  |  \--A: No logo
|  |  |  |     Q: <end>
|  |  |  |
|  |  |  \--A: Orange
|  |  |     Q: <end>
|  |  |
|  |  \--A: Hoodie
|  |     Q: Color of hoodie?
|  |     |
|  |     |--A: Gray
|  |     |  Q: <end>
|  |     |
|  |     |--A: Blue
|  |     |  Q: Logo for hoodie?
|  |     |  |
|  |     |  |--A: TV show
|  |     |  |  Q: <end>
|  |     |  |
|  |     |  \--A: No logo
|  |     |     Q: <end>
|  |     |
|  |     |--A: Green
|  |     |  Q: <end>
|  |     |
|  |     |--A: Pink
|  |     |  Q: <end>
|  |     |
|  |     |--A: Brown
|  |     |  Q: <end>
|  |     |
|  |     |--A: Black
|  |     |  Q: <end>
|  |     |
|  |     \--A: Red
|  |        Q: <end>
|  |
|  \--A: Hat
|     Q: Type of hat?
|     |
|     |--A: Stetson
|     |  Q: <end>
|     |
|     \--A: Sombrero
|        Q: <end>
|
\--A: Food
   Q: Type of food?
   |
   |--A: Ramen noodles
   |  Q: <end>
   |
   |--A: Soda pop
   |  Q: Flavor
   |  |
   |  |--A: Cola
   |  |--Q: <end>
   |  |
   |  |--A: Lemon
   |  |--Q: <end>
   |  |
   |  |--A: Orange
   |  |--Q: <end>
   |  |
   |  |--A: Apple
   |  \--Q: <end>
   |
   \--A: Bananas
      Q: <end>

客户从“答案”<start> 开始，选择多项选择题，直到到达具有特殊“问题”<end> 的节点。

当我们将这棵树映射到 JSON 时，询问用户感兴趣的产品类别(衣服/食品)的根问题(上面的 <start>)可以具有标签值 null，因为它不是答案( child )任何其他问题。它是整个结构的第一个对象，所有其他节点都是它的子节点。无法进行进一步选择的叶节点(上面的 <end>)由 null 代替 question 字符串和 children 数组表示。所有其他节点指定一个标签字符串(节点“回答”的顶级问题)、下一个问题以及该问题的可能答案数组:

{
 "label": null,
 "question": "What product category?",
 "children": [
  {
   "label": "Clothes",
   "question": "What type of clothing?",
   "children": [
    {
     "label": "Jeans",
     "question": "Color of jeans?",
     "children": [
      {
       "label": "Blue",
       "question": null,
       "children": null
      },
      {
       "label": "Black",
       "question": null,
       "children": null
      },
      {
       "label": "White",
       "question": null,
       "children": null
      }
     ]
    },
    {
     "label": "Shirt",
     "question": "Type of shirt?",
     "children": [
      {
       "label": "T-Shirt",
       "question": "Color of T-shirt?",
       "children": [
        {
         "label": "Red",
         "question": null,
         "children": null
        },
        {
         "label": "Green",
         "question": null,
         "children": null
        },
        {
         "label": "Black",
         "question": "Logo?",
         "children": [
          {
           "label": "Rock band",
           "question": null,
           "children": null
          },
          {
           "label": "TV show",
           "question": null,
           "children": null
          },
          {
           "label": "No logo",
           "question": null,
           "children": null
          }
         ]
        },
        {
         "label": "Orange",
         "question": null,
         "children": null
        }
       ]
      },
      {
       "label": "Hoodie",
       "question": "Color of hoodie?",
       "children": [
        {
         "label": "Gray",
         "question": null,
         "children": null
        },
        {
         "label": "Blue",
         "question": null,
         "children": [
          {
           "label": "TV show",
           "question": null,
           "children": null
          },
          {
           "label": "No logo",
           "question": null,
           "children": null
          }
         ]
        },
        {
         "label": "Green",
         "question": null,
         "children": null
        },
        {
         "label": "Pink",
         "question": null,
         "children": null
        },
        {
         "label": "Brown",
         "question": null,
         "children": null
        },
        {
         "label": "Black",
         "question": null,
         "children": null
        },
        {
         "label": "Red",
         "question": null,
         "children": null
        }
       ]
      },
      {
       "label": "White",
       "question": null,
       "children": null
      }
     ]
    },
    {
     "label": "Hat",
     "question": "Type of hat?",
     "children": [
      {
       "label": "Stetson",
       "question": null,
       "children": null
      },
      {
       "label": "Sombrero",
       "question": null,
       "children": null
      }
     ]
    }
   ]
  },
  {
   "label": "Food",
   "question": "Type of food?",
   "children": [
    {
     "label": "Ramen noodles",
     "question": null,
     "children": null
    },
    {
     "label": "Soda pop",
     "question": null,
     "children": [
      {
       "label": "Cola",
       "question": null,
       "children": null
      },
      {
       "label": "Lemon",
       "question": null,
       "children": null
      },
      {
       "label": "Orange",
       "question": null,
       "children": null
      },
      {
       "label": "Apple",
       "question": null,
       "children": null
      }
     ]
    },
    {
     "label": "Bananas",
     "question": null,
     "children": null
    }
   ]
  }
 ]
}

以上是 100% 有效的 JSON:您可以将其复制并粘贴到 JSONtree 以逐级研究其结构。

故事的主旨是，这种可能相当复杂的可用用户选择和路径系统，可以在其核心(带叶子的节点)中用一个非常简单的数据结构来实现。复杂性源于您在节点之间定义的关系。

关于javascript - 如何创建可以处理条件的 JSON 对象？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20052660/