如何在 Javascript 的数组中获取所有相同类型的对象？

Question

作为项目的一部分，我正在使用 TomTom places api。我是 Javascript 的新手，我发现很难从 API 中提取我需要的信息。我正在尝试从结果数组中获取所有名称、phone 数字、地址和 url。这就是我正在使用的 -

"summary": {
  "query": "restaurant",
  "queryType": "NON_NEAR",
  "queryTime": 126,
  "numResults": 10,
  "offset": 0,
  "totalResults": 102131,
  "fuzzyLevel": 1,
  "geoBias": {
    "lat": 50.266,
    "lon": 5.0527
  }
},
"results": [{
  "type": "POI",
  "id": "GB/POI/p0/1035734",
  "score": 2.1523399353027344,
  "dist": 277294.490777698,
  "info": "search:ta:826009007710588-GB",
  "poi": {
    "name": "Bay Restaurant",
    "phone": "+(44)-(1304)-852229",
    "categorySet": [{
      "id": 7315008
    }],
    "url": "thewhitecliffs.com",
    "categories": [
      "british",
      "restaurant"
    ],
    "classifications": [{
      "code": "RESTAURANT",
      "names": [{
          "nameLocale": "en-US",
          "name": "restaurant"
        },
        {
          "nameLocale": "en-US",
          "name": "british"
        }
      ]
    }]
  },
  "address": {},
  "position": {
    "lat": 51.15375,
    "lon": 1.37204
  },
  "viewport": {
    "topLeftPoint": {
      "lat": 51.15465,
      "lon": 1.37061
    },
    "btmRightPoint": {
      "lat": 51.15285,
      "lon": 1.37347
    }
  },
  "entryPoints": [{
    "type": "main",
    "position": {
      "lat": 51.15375,
      "lon": 1.37204
    }
  }]
}

到目前为止，我已经通过以下方式获得了第一个结果的名称 -

function callbackFn(result) {
  console.log(result[0].poi.name)
}

而且我已经设法对 phone 号码做了同样的事情 -

function callbackFn(result) {
  console.log(result[0].poi.phone)
}

但是，我不知道如何获取所有给定结果的数据。给出的结果数量根据搜索条件而有所不同，所以我希望能够获得所有结果的名称、phone 数字、地址和 url，无论是 8 还是 100。

Answer 1

你实际上已经完成了一半，你只需要用一个增加的索引替换特定的索引。您可以只遍历数组（使用 for、for...of 或 while 循环）：如果您不确定如何执行此操作，有大量的基础指南，因此一定要有 Google左右：这里是迭代中的MDN介绍文章，很不错：https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code

The array method "map" 将是做您想做的事情的更明智、更明确的方式，但如果您卡在这一点上，那么您可能会发现 map 稍微更令人困惑，因为这取决于对高阶函数如何工作的理解。

Answer 2

您可以使用Array.prototype.map() method with object destructuring来select您想要的具体属性：

function callbackFn(results) {
  const data = results.map(result => {
    const { poi, address } = result;
    const { name, phone, url } = poi;
    return { name, phone, address, url };
  });

  console.log(data);
}

const results = [{
  "type": "POI",
  "id": "GB/POI/p0/1035734",
  "score": 2.1523399353027344,
  "dist": 277294.490777698,
  "info": "search:ta:826009007710588-GB",
  "poi": {
    "name": "Bay Restaurant",
    "phone": "+(44)-(1304)-852229",
    "categorySet": [{
      "id": 7315008
    }],
    "url": "thewhitecliffs.com",
    "categories": [
      "british",
      "restaurant"
    ],
    "classifications": [{
      "code": "RESTAURANT",
      "names": [{
          "nameLocale": "en-US",
          "name": "restaurant"
        },
        {
          "nameLocale": "en-US",
          "name": "british"
        }
      ]
    }]
  },
  "address": {},
  "position": {
    "lat": 51.15375,
    "lon": 1.37204
  },
  "viewport": {
    "topLeftPoint": {
      "lat": 51.15465,
      "lon": 1.37061
    },
    "btmRightPoint": {
      "lat": 51.15285,
      "lon": 1.37347
    }
  },
  "entryPoints": [{
    "type": "main",
    "position": {
      "lat": 51.15375,
      "lon": 1.37204
    }
  }]
}]

callbackFn(results);

Answer 3

使用Array.map() 来展平对象。我简化了对象（工作方式相同）并在返回的对象文字中使用了三元运算符，以防任何属性不存在。

let obj = {

  "summary": {
    "query": "restaurant"
  },
  "results": [{
      "poi": {
        "name": "Bay Restaurant",
        "phone": "+(44)-(1304)-852229",
        "url": "thewhitecliffs.com",
      },
      "address": {
        "stAddr": "1234 main st",
        "city": "Your City",
        "state": "Your State"
      },
    },
    {
      "poi": {
        "name": "Other Bay Restaurant",
        "phone": "Other +(44)-(1304)-852229",
        "url": "Other thewhitecliffs.com",
      },
      "address": {
        "stAddr": "Other 1234 main st",
        "city": "Other Your City",
        "state": "Other Your State"
      },
    }
  ]
}

let result = obj.results.map(el => {
    return {
        name: el.poi && el.poi.name ? el.poi.name : "",
        phone: el.poi && el.poi.phone ? el.poi.phone : "",
        url: el.poi && el.poi.url ? el.poi.url : "",
        stAddr: el.address && el.address.stAddr ? el.address.stAddr : "",
        city: el.address && el.address.city ? el.address.city : "",
        state: el.address && el.address.state ?  el.address.state : ""
    }
})

console.log(result)

如何在 Javascript 的数组中获取所有相同类型的对象？

How to get all objects of same type inside an array in Javascript?

javascript

arrays

json

tomtom