深入解析：如何在复杂JSON结构中高效定位并排序嵌套数组

{
    "country": {
        "state": [
            {
                "city": [
                    {
                        "nest_1": {
                            "nest_2": {
                                "borough": [
                                    { "id": 1 },
                                    { "id": 8 },
                                    { "id": 5 },
                                    { "id": 2 }
                                ]
                            }
                        }
                    }
                ]
            }
        ]
    }
}

// 模拟从API获取的数据
const all_data = {
    country: {
        state: [{
            city: [{
                nest_1: {
                    nest_2: {
                        borough: [{ id: 1 }, { id: 8 }, { id: 5 }, { id: 2 }]
                    }
                }
            }]
        }]
    }
};

// 1. 定位到目标数组
const boroughArray = all_data.country.state[0].city[0].nest_1.nest_2.borough;

// 2. 对数组进行排序
boroughArray.sort((a, b) => a.id - b.id);

// 打印排序后的数据，可以看到原始的 all_data 结构也已被更新
console.log("排序后的数据结构：", all_data);
// 预期输出：
// {
//     country: {
//         state: [{
//             city: [{
//                 nest_1: {
//                     nest_2: {
//                         borough: [{ id: 1 }, { id: 2 }, { id: 5 }, { id: 8 }]
//                     }
//                 }
//             }]
//         }]
//     }
// }

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

interface BoroughItem {
  id: number;
}

interface Nest2 {
  borough: BoroughItem[];
}

interface Nest1 {
  nest_2: Nest2;
}

interface City {
  nest_1: Nest1;
}

interface State {
  city: City[];
}

interface Country {
  state: State[];
}

interface AllDataStructure {
  country: Country;
}

@Component({
  selector: 'app-data-viewer',
  template: `
    <h2>Sorted Borough IDs:</h2>
    <div *ngIf="allData && allData[0]?.country?.state[0]?.city[0]?.nest_1?.nest_2?.borough">
      <p>Original Data (after sort): {{ allData[0].country.state[0].city[0].nest_1.nest_2.borough | json }}</p>
      <ul>
        <li *ngFor="let item of allData[0].country.state[0].city[0].nest_1.nest_2.borough">{{ item.id }}</li>
      </ul>
    </div>
    <div *ngIf="!allData">Loading data...</div>
  `
})
export class DataViewerComponent {
  allData: AllDataStructure[] = []; // 注意：原始问题中 all_data 被包装成数组

  // 假设 datajson 是一个指向 JSON 文件的路径或 API 端点
  datajson = 'assets/data.json'; // 示例路径

  constructor(private http: HttpClient) {
    this.http.get<AllDataStructure>(this.datajson).subscribe(
      (response: AllDataStructure) => {
        // 确保数据结构与预期一致，并进行类型断言
        const data = response;

        // 导航并排序
        const boroughArray = data.country.state[0].city[0].nest_1.nest_2.borough;
        boroughArray.sort((a, b) => a.id - b.id);

        // 将处理后的数据赋值给组件属性
        this.allData = [data]; // 保持原始问题中将数据包装成数组的习惯
      },
      error => {
        console.error('Error fetching data:', error);
      }
    );
  }
}