Json - Tree data format

Question

I'm trying to format the json reposnse to make it work with JStree

Here the url json response

{
  "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" }
  ]
}

Here is the response that I'm trying to get:

[
  { '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' },
]

Here is my take on it:

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 Issues:

1.Json not formatted as jstree require

2. the value of the keys "id" and "parent" are not stringified

I really appreciate any help you can provide.

Answer 1

I couldn't understand all of your logic, but I hope this code can help you.

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);