How to flatten the three-level tree structure data of provinces, cities and districts and streamline the results according to the selected status?

Flatten the three-level tree structure data of provinces, cities and districts, and streamline the results according to the selected status

This article introduces how to flatten the three-level tree structure data of provinces, cities and districts, and streamline the results based on the selected status. The original data adopts a tree structure, including province, city, district and county information and selected status ( checked: 1 means selected). The goal is to generate a flat structure that contains only the necessary area code and hierarchy information.

Original data example:

 [
  {
    "code": "110000",
    "value": "Beijing",
    "checked": "1",
    "children": [
      {
        "code": "110100",
        "value": "Beijing",
        "checked": "1",
        "children": [
          { "code": "110101", "value": "Dongcheng District", "checked": "1" },
          { "code": "110102", "value": "Xicheng District", "checked": "1" }
        ]
      }
    ]
  },
  {
    "code": "120000",
    "value": "Tianjin City",
    "checked": "1",
    "children": [
      {
        "code": "120100",
        "value": "Tianjin City",
        "checked": "1",
        "children": [
          { "code": "120101", "value": "Heping District", "checked": "0" },
          { "code": "120102", "value": "Hedong District", "checked": "1" }
        ]
      }
    ]
  }
]

Target flat structure:

If all tertiary regions are selected, only the first-level and second-level area codes are retained; if all tertiary regions are selected, only the first-level area codes are retained; if only the third-level area is selected, only the first-level, second-level and third-level area codes are retained.

 [
  {
    "provinceAreald": "110000",
    "cityAreald": null,
    "countryAreald": null,
    "actualAreaLevel": "1"
  },
  {
    "provinceAreald": "120000",
    "cityAreald": "120100",
    "countryAreald": "120102",
    "actualAreaLevel": "3"
  }
]

JavaScript function implementation:

The following JavaScript function flattenData implements data flattening:

 function flattenData(data) {
  const result = [];

  function processNode(node, parent) {
    if (node.checked === "1") {
      const item = {
        provinceAreald: parent ? parent.code : node.code,
        cityAreald: null,
        countryAreald: null,
        actualAreaLevel: '1'
      };

      if (node.children) {
        const allChildrenChecked = node.children.every(child => child.checked === "1");
        if (allChildrenChecked) {
          item.actualAreaLevel = node.children[0].children ? '2' : '1';
          if(node.children[0].children){
            item.cityAreald = node.children[0].code;
          }
        } else {
          item.actualAreaLevel = '2';
          item.cityAreald = node.code;
          for (const child of node.children) {
            processNode(child, item);
          }
          return;
        }
      }

      result.push(item);
    } else if (node.children) {
      for (const child of node.children) {
        processNode(child, node);
      }
    }
  }

  for (const node of data) {
    processNode(node);
  }

  return result;
}

// Example usage const data = [/* ...raw data... */];
const flattenedData = flattenData(data);
console.log(flattenedData);

This function uses a recursive method to process the tree structure, and dynamically adjust the values ​​of actualAreaLevel and cityAreald and countryAreald fields according to the selected state and the selection of child nodes, and finally generates thin flat data. The code is also optimized, reducing unnecessary function nesting and improving readability and efficiency.

The above is the detailed content of How to flatten the three-level tree structure data of provinces, cities and districts and streamline the results according to the selected status?. For more information, please follow other related articles on the PHP Chinese website!