【问题标题】:Json - Tree data formatJson - 树数据格式
【发布时间】:2021-06-24 07:51:27
【问题描述】:

我正在尝试格式化 json reposnse 以使其与 JStree 一起使用

这里是 url json 响应

{
  "items": [
    { "id": 1, "parent_id": 0, "name": "Root Catalog" },
    { "id": 2, "parent_id": 1, "name": "Default Category" },
    { "id": 3, "parent_id": 2, "name": "category1" },
    { "id": 5, "parent_id": 3, "name": "Sub1_category1" },
    { "id": 6, "parent_id": 3, "name": "Sub2_category1" },

    { "id": 11, "parent_id": 2, "name": "category2" },

    { "id": 12, "parent_id": 2, "name": "category3" },
    { "id": 14, "parent_id": 12, "name": "Sub1_category3" },
    { "id": 15, "parent_id": 12, "name": "Sub1_category4" }
  ]
}

这是我想要得到的回复:

[
  { 'id': '1', 'parent': '#', 'text': 'Root Catalog' },
  { 'id': '2', 'parent': '1', 'text': 'Default Category' },
  { 'id': '3', 'parent': '2', 'text': 'category1' },
  { 'id': '5', 'parent': '3', 'text': 'Sub1_category1' },
  { 'id': '6', 'parent': '3', 'text': 'Sub2_category1' },
  { 'id': '11', 'parent': '2', 'text': 'category2' },
  { 'id': '12', 'parent': '2', 'text': 'category3' },
  { 'id': '14', 'parent': '12', 'text': 'Sub1_category3' },
  { 'id': '15', 'parent': '12', 'text': 'Sub2_category3' },
]

这是我的看法:

let test = {
  "items": [
    { "id": 1, "parent_id": 0, "name": "Root Catalog" },
    { "id": 2, "parent_id": 1, "name": "Default Category" },
    { "id": 3, "parent_id": 2, "name": "category1" },
    { "id": 5, "parent_id": 3, "name": "Sub1_category1" },
    { "id": 6, "parent_id": 3, "name": "Sub2_category1" },

    { "id": 11, "parent_id": 2, "name": "category2" },

    { "id": 12, "parent_id": 2, "name": "category3" },
    { "id": 14, "parent_id": 12, "name": "Sub1_category3" },
    { "id": 15, "parent_id": 12, "name": "Sub1_category4" }
  ]
}

function formatData(itemsList) {
  let formatOutput = [];
  for (item of itemsList.items) {
    if (item.parent_id > 0) {
      if (item.parent_id !== 1 && typeof formatOutput[item.parent_id] === 'undefined') {
        formatOutput[item.parent_id] = {
          "parent": item.parent_id,
          "id": item.id,
          "text": null,
          "children": [
            {
              id: item.id,
              text: item.name,
              parent: item.parent_id
            }
          ]
        }
      } else if (item.parent_id !== 1) {
        formatOutput[item.parent_id].children.push({
          id: item.id,
          text: item.name,
          parent: item.parent_id
        })
      }
    }
  }
  for (item of itemsList.items) {
    if (typeof formatOutput[item.id] === 'object') {
      formatOutput[item.id].text = item.name
    }
  }
  return formatOutput.filter(val => val)
}

console.log(formatData(test))

jsfiddle

2 个问题:

1.Json 未格式化为 jstree 要求

  1. 键“id”和“parent”的值未字符串化

非常感谢您提供的任何帮助。

【问题讨论】:

    标签: javascript jquery json jstree


    【解决方案1】:

    我无法理解你的所有逻辑,但我希望这段代码可以帮助你。

    const test =      {"items":[
        {"id":1,"parent_id":0,"name":"Root Catalog"},
          {"id":2,"parent_id":1,"name":"Default Category"},
             {"id":3,"parent_id":2,"name":"category1"},
                {"id":5,"parent_id":3,"name":"Sub1_category1"},
                {"id":6,"parent_id":3,"name":"Sub2_category1"},
    
             {"id":11,"parent_id":2,"name":"category2"},
                
             {"id":12,"parent_id":2,"name":"category3"},
               {"id":14,"parent_id":12,"name":"Sub1_category3"},
               {"id":15,"parent_id":12,"name":"Sub1_category4"}
        ]
    }
    
       
    const result = test.items.map(x =>{
        return {
            id: x.id === 1 ? "#" : x.id, // if the id of the element is 1 put # else x.id
            parent: x.parent_id,
            text: x.name
        }
    })
    
    console.log(result);

    【讨论】:

    • 感谢您的回复。它工作得很好,对我帮助很大。但是,JStree 要求类别(而不是子类别)具有 "parent_id":"#" 。所以,我在想是否可以在你的代码中添加一个 if 是类别“parent”:“#” else parent:x.parent_id。再次感谢
    • 你能解释一下什么时候需要返回#,什么时候应该是parent_id?
    • 我想在数组的第一个元素上应用 "parent_id":"#"。 if ( /* 是第一个元素 */ ) {id: x.id, parent_id":"#", text: x.name } else { id: x.id, parent: x.parent_id, text: x.name }
    • 嘿,我更新了代码。如果我现在得到了你想要的,那就对了。
    • 尝试学习这些函数.map()、forEach()、find()、some()、filter()。它可以帮助您管理阵列。但是,即使如此,也不要忘记原始的 for。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-02-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多