javascript - 嵌套的json怎么样根据指定的label进行排序啊?

Question

{
"项目属性": {
                "怎么样去指定项目的位置?": {
                    "raw": "> 具体方法就是指定项目的四个边框，分别定位在哪根网格线。\n- `grid-column-start`属性：左边框所在的垂直网格线\n- `grid-column-end`属性：右边框所在的垂直网格线\n- `grid-row-start`属性：上边框所在的水平网格线\n- `grid-row-end`属性：下边框所在的水平网格线\n\n```css\n.item-1 {\n  grid-column-start: 2;\n  grid-column-end: 4;\n  /* 除了指定为第几个网格线，还可以指定为网格线的名字 */\n  grid-column-start: header-start;\n  grid-column-end: header-end;\n}\n/* 1号项目的左边框是第二根垂直网格线，右边框是第四根垂直网格线 */\n/* 只指定了1号项目的左右边框，没有指定上下边框，所以会采用默认位置，即上边框是第一根水平网格线，下边框是第二根水平网格线。*/\n```\n\n",
                    "简写方式?": {
                        "raw": "> `    grid-column`属性是`grid-column-start`和`grid-column-end`的合并简写形式，`grid-row`属性是`grid-row-start`属性和`grid-row-end`的合并简写形式。\n```css\n.item {\n  grid-column: <start-line> / <end-line>;\n  grid-row: <start-line> / <end-line>;\n}\n```\n\n",
                        "label": "1.1.2.3.1.3"
                    },
                    "怎么样去表示跨域边框?": {
                        "raw": "> 以上四个属性属性的值还可以使用`span`关键字，表示\"跨越\"，即左右边框（上下边框）之间跨越多少个网格;\n```css\n.item-1 {\n  grid-column-start: span 2;\n}\n/* 1号项目的左边框距离右边框跨越2个网格。 */\n```\n\n",
                        "label": "1.1.2.3.1.1"
                    },
                    "当跨域时,产生了重叠,怎么样处理?": {
                        "raw": "> 使用这四个属性，如果产生了项目的重叠，则使用`z-index`属性指定项目的重叠顺序。\n",
                        "label": "1.1.2.3.1.2"
                    },
                    "label": "1.1.2.3.1"
                },
                "怎么样指定项目放在哪一个区域?": {
                    "通过区域名称去指定?": {
                        "raw": "```css\n.item-1 {\n  grid-area: e;\n}\n```\n\n",
                        "label": "1.1.2.3.2.1"
                    },
                    "通过项目的位置去指定?": {
                        "raw": "```css\n.item {\n  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;\n}\n```\n\n",
                        "label": "1.1.2.3.2.2"
                    },
                    "label": "1.1.2.3.2"
                },
                "justify-self 属性， align-self 属性， place-self 属性": {
                    "作用?": {
                        "raw": "> `justify-self`属性设置单元格内容的水平位置（左中右），跟`justify-items`属性的用法完全一致，但只作用于单个项目。\n>\n> `align-self`属性设置单元格内容的垂直位置（上中下），跟`align-items`属性的用法完全一致，也是只作用于单个项目。\n",
                        "label": "1.1.2.3.3.1"
                    },
                    "取值?": {
                        "raw": "- start：对齐单元格的起始边缘。\n- end：对齐单元格的结束边缘。\n- center：单元格内部居中。\n- stretch：拉伸，占满单元格的整个宽度（默认值）。\n\n",
                        "label": "1.1.2.3.3.3"
                    },
                    "简写?": {
                        "raw": "> `place-self`属性是`align-self`属性和`justify-self`属性的合并简写形式。\n```css\nplace-self: <align-self> <justify-self>;\n/* 如果省略第二个值，place-self属性会认为这两个值相等。 */\n```",
                        "label": "1.1.2.3.3.2"
                    },
                    "label": "1.1.2.3.3"
                },
                "label": "1.1.2.3"
            }
}

大佬们,因为数据是从mysql中取出来的,mysql中保存json时,会自动打乱顺序.后端添加了label标签,但是给到做前端的我时,不知道怎么样去根据lable标签去对嵌套的结构进行排序,特来请教大神们;相同级别下,希望按照1.1.2.3.1.1 -> 1.1.2.3.1.2 -> 1.1.2.3.1.3这样的顺序去排序;

Answer 1

function sortNestedJson(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }
  const sortedKeys = Object.keys(obj).sort((a, b) => {
    const aLabel = obj[a].label;
    const bLabel = obj[b].label;

    if (aLabel && bLabel) {
      return aLabel.localeCompare(bLabel);
    }

    return a.localeCompare(b);
  });
  const sortedObj = {};
  for (const key of sortedKeys) {
    sortedObj[key] = sortNestedJson(obj[key]);
  }

  return sortedObj;
}

const sortedData = sortNestedJson(yourJsonData);