为什么JSON结构中的数字键始终首先显示

Question

（无法在单个语句中总结问题，因此标题含糊不清）

我通过Angular Typescript创建一个JSON结构，当用户与组件的某些部分交互时，JSON结构会更新。

Steps

1. 最初，正在考虑的JSON默认设置为以下内容：

   {
     "keyword": {
     "value": "product",
      "type": "main"
      }
   }

2. 例如，用户选择一些参数Name。一旦用户遵守UI中的某些步骤，JSON结构就会更新为以下内容：

   {
     "keyword": {
     "value": "product",
     "type": "main"
     },
      "Name": {
      "value": " <hasProperty> Name",
      "type": "dataprop"
     }
   }

3. 一旦用户选择dryTime等参数的数值，JSON就会更新为以下内容：

   {
      "20": { // WHY WOULD 20 be here?
      "value": "<hasValue> 20",
      "type": "fValue"
      },
      "keyword": {
       "value": "Varnish",
       "type": "main"
      },
      "Name": {
      "value": " <hasProperty> Name",
      "type": "dataprop"
      },
     "dryingTime": {
     "value": " <hasProperty> dryingTime",
     "type": "dataprop"
      }
   }

我知道JSON是一种无序的数据结构。但之前类似的东西的实现实际上运行良好，即之前20的值是20.0，它在我的JSON中显示在dryingTime之后。

顺序对我来说至关重要，因为我使用for循环解析上述JSON中的所有Keys并将其存储在数组中。此数组需要按用户交互的顺序显示所有键。

如果我决定继续使用JSON而不是使用数组存储此类交互，我在哪里出错？

Answer 1

是的，JSON字段是无序的。 JSON数组是有序的。

如果要保持插入元素的顺序，可以像这样构建JSON：

{
    "keyword": {
        "value": "Varnish",
        "type": "main"
    },
    "props": [
        {
            "name": "dryingTime",
            "value": 20
        },
        {
            "name": "anotherOrderedField",
            "value": "fieldValue"
        }
    ]
}