如何在Angular前端循环这种类型的Json数据[关闭]答案

【问题标题】：How to loop this type of Json Data in Angular front end [closed]如何在Angular前端循环这种类型的Json数据[关闭]
【发布时间】：2021-11-03 13:46:55
【问题描述】：

请帮助我在 Angular 10 的“选择下拉菜单”中循环以下数据。我想显示印度及其地区的所有州。我从网上得到这些数据，但不知道在前端列出它们。

                {
                "AN": {
                    "name": "Andaman and Nicobar Island (UT)",
                    "capital": "Port Blair",
                    "districts": {
                        "1": "Nicobar",
                        "2": "North and Middle Andaman",
                        "3": "South Andaman"
                    }
                },
                "AP": {
                    "name": "Andhra Pradesh",
                    "capital": "Amaravati",
                    "districts": {
                        "1": "Anantapur",
                        "2": "Chittoor",
                        "3": "East Godavari",
                        "4": "Guntur",
                        "5": "Krishna",
                        "6": "Kurnool",
                        "7": "Prakasam",
                        "8": "Srikakulam",
                        "9": "Sri Potti Sriramulu Nellore",
                        "10": "Visakhapatnam",
                        "11": "Vizianagaram",
                        "12": "West Godavari",
                        "13": "YSR District, Kadapa (Cuddapah)"
                    }
                },}

【问题讨论】：

标签： json angular

【解决方案1】：

你可以使用 Objects.keys：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries

let states = Object.keys(this.data);
we will have list of states.
Each state is array 
state[0] code of state: AN
state[1] value of state: {name:...}

这是模板：

<select formControlName="state" class="form-control">  
      <option disabled>Select State</option>  
      <option *ngFor="let state of states" value="state[0]">{{state[1].name}}</option>  
 </select>

...html 的选项等效于：

<option value="AN">Andaman and Nicobar Island (UT)</option>

您应该根据需要修改代码。

【讨论】：

【解决方案2】：

其中一个解决方案可能是这样的。

data = {
    "AN": {
        "name": "Andaman and Nicobar Island (UT)",
        "capital": "Port Blair",
        "districts": {
            "1": "Nicobar",
            "2": "North and Middle Andaman",
            "3": "South Andaman"
        }
    },
    "AP": {
        "name": "Andhra Pradesh",
        "capital": "Amaravati",
        "districts": {
            "1": "Anantapur",
            "2": "Chittoor",
            "3": "East Godavari",
            "4": "Guntur",
            "5": "Krishna",
            "6": "Kurnool",
            "7": "Prakasam",
            "8": "Srikakulam",
            "9": "Sri Potti Sriramulu Nellore",
            "10": "Visakhapatnam",
            "11": "Vizianagaram",
            "12": "West Godavari",
            "13": "YSR District, Kadapa (Cuddapah)"
        }
    },
};

constructor() {
  let array = Object.keys(this.data).map(key => this.data[key]);
  console.log(array);
}

【讨论】：