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

作者站长头像
站长
· 阅读数 16

{
"项目属性": {
                "怎么样去指定项目的位置?": {
                    "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这样的顺序去排序;

回复
1个回答
avatar
test
2024-07-03
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);
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容