JavaScript：仅列出具有相同父值的值一次

Question

所以直奔主题。我有一个问题，我从 api 获取数据作为对象数组。每个对象包括一个城市和一个区。城市和地区是包含名称和 ID 的对象

  city: Object

    id: 3

    name: "Rathbury"

  district: Object

    id: 39

    name: "Bosnia and Herzegovina District"

更新： 输入

[

  {

    "title": "Kris Lodge",

    "location_text": "5739 Jakob Prairie Suite 451\nWest Leraview, MI 35816",

    "latitude": "",

    "longitude": "",

    "phone_numbers": [

      "01648997890",

      "01038129111"

    ],

    "emails": [

      "[e-mail]",

      "[e-mail]"

    ],

    "city": {

      "id": 9,

      "name": "Bernhardburgh"

    },

    "district": {

      "id": 13,

      "name": "Hong Kong Neighbourhood"

    }

  },

  {

    "title": "Tanner Circles",

    "location_text": "4513 Patrick Junctions\nNorth Priceport, CT 05572-1565",

    "latitude": "",

    "longitude": "",

    "phone_numbers": [

      "01894655129",

      "01768939354",

      "01054035727",

      "01120801876"

    ],

    "emails": [

      "[e-mail]",

      "[e-mail]",

      "[e-mail]"

    ],

    "city": {

      "id": 3,

      "name": "Rathbury"

    },

    "district": {

      "id": 11,

      "name": "Vanuatu Neighbourhood"

    }

  },

  {

    "title": "Walsh Harbors",

    "location_text": "5300 McGlynn Flat\nGustaveville, PA 08941-6431",

    "latitude": "",

    "longitude": "",

    "phone_numbers": [

      "01330125574"

    ],

    "emails": [

      "[e-mail]",

      "[e-mail]",

      "[e-mail]"

    ],

    "city": {

      "id": 15,

      "name": "Wintheiserfort"

    },

    "district": {

      "id": 34,

      "name": "Armenia Neighbourhood"

    }

  },

  {

    "title": "Botsford Villages",

    "location_text": "461 Zemlak Hollow Suite 549\nLangworthberg, NE 40867-0943",

    "latitude": "",

    "longitude": "",

    "phone_numbers": [

      "01955713451",

      "01819751112",

      "01366897031"

    ],

一个城市可以出现两次，但一个地区不能出现。如何只列出城市内的地区一次？这是显示更多详细信息的图像。我怎样才能得到展示Mali Area和Bosnia and Herzegovina District下Amparoville一次？

Answer 1

根据您希望收藏的外观，我认为此解决方案适合您。var data = [{&nbsp; &nbsp; city: {&nbsp; &nbsp; &nbsp; id: 3,&nbsp; &nbsp; &nbsp; name: "Amaporville"&nbsp; &nbsp; },&nbsp; &nbsp; district: {&nbsp; &nbsp; &nbsp; id: 39,&nbsp; &nbsp; &nbsp; name: "Bosnia and Herzegovina District"&nbsp; &nbsp; }&nbsp; },&nbsp; {&nbsp; &nbsp; city: {&nbsp; &nbsp; &nbsp; id: 3,&nbsp; &nbsp; &nbsp; name: "Rathbury"&nbsp; &nbsp; },&nbsp; &nbsp; district: {&nbsp; &nbsp; &nbsp; id: 38,&nbsp; &nbsp; &nbsp; name: "Montenegro Heights"&nbsp; &nbsp; },&nbsp; },&nbsp; {&nbsp; &nbsp; city: {&nbsp; &nbsp; &nbsp; id: 3,&nbsp; &nbsp; &nbsp; name: "Amaporville"&nbsp; &nbsp; },&nbsp; &nbsp; district: {&nbsp; &nbsp; &nbsp; id: 40,&nbsp; &nbsp; &nbsp; name: "Mali Area"&nbsp; &nbsp; }&nbsp; }]function transformArr(orig) {&nbsp; var newArr = [],&nbsp; &nbsp; cities = {},&nbsp; &nbsp; i, cur;&nbsp; for (i = 0; i < orig.length; i++) {&nbsp; &nbsp; cur = orig[i];&nbsp; &nbsp; if (!cities[cur.city.name]) {&nbsp; &nbsp; &nbsp; var obj = {}&nbsp; &nbsp; &nbsp; obj['city'] = cur.city&nbsp; &nbsp; &nbsp; cities[cur.city.name] = {&nbsp; &nbsp; &nbsp; &nbsp; districts: []&nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; obj['districts'] = cities[cur.city.name].districts&nbsp; &nbsp; &nbsp; newArr.push(obj);&nbsp; &nbsp; }&nbsp; &nbsp; cities[cur.city.name].districts.push(cur.district);&nbsp; }&nbsp; return newArr;}console.log(transformArr(data))本质上，您使用哈希图并向其中添加城市。城市名称指向一系列地区。城市对象的目的是确定您的集合是否已经包含该城市的名称。如果是这样，将当前地区添加到该项目地区。当您组织散列映射时，您还向其添加city键obj并为其分配当前对象的城市对象的值。然后你对地区做同样的事情。最后，属于一个城市的所有地区都会出现在该城市下方，而不是之前出现两次（或者该城市在原始收藏中出现过多少次）。