Question

我正在进行API调用以撤回一些JSON数据

curl -X GET --header 'Accept: application/vnd.y+json;version=2' --header 'Authorization: Token token=nxxxxxxxxxxxxxxx' 'https://api.myapi/PBHBP1E?include%5B%5D=contact_methods&include%5B%5D=notification_rules&include%5B%5D=teams'

返回类似....

的内容

{
  "user": {
    "name": "John Smith",
    "email": "mtirza@xxxxxxxxx.com",
    "time_zone": "America/Los_Angeles",
    "color": "dark-olive-green",
    "avatar_url": "https://sxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    "billed": true,
    "role": "team_responder",
    "description": null,
    "invitation_sent": false,
    "contact_methods": [
      {
        "id": "P6G5LDE",
        "type": "email_contact_method",
        "summary": "Default",
        "self": "https://api.myapi/P6G5LDE",
        "html_url": null,
        "label": "Default",
        "address": "mtirza@xxxxxxxxx.com",
        "send_short_email": false,
        "send_html_email": true
      },
      {
        "id": "PV67YL2",
        "type": "phone_contact_method",
        "summary": "Mobile",
        "self": "https://api.myapi/PV67YL2",
        "html_url": null,
        "label": "Mobile",
        "address": "123456",
        "country_code": 1,
        "blacklisted": false
      }
    ]

}

我在某些HTML中使用了什么返回，我的问题是，我想查找"type" phone_contact_method并撤回"address" 因为我不确定它会在哪个data.user.contact_methods[?]阵列中，但我知道我会一直想要

data.user.contact_methods.Type.phone_contact_method.address

这可能使用类似下面的内容吗？

function Request(endpoint, options) {
    $.ajax($.extend({}, {
        async: false,   
    type: 'GET',
    dataType: "json",
    success: function(data) {
    $('.Name').html(data.user.name);     // John Smith
    $('.Email').html(data.user.email);   // mebmirza@xxxxxxxxx.com
    $('.Phone').html(data.user.contact_methods[1].address); // 123456

},
    url: "https://api.myapi/" + endpoint,
    headers: {
      "Authorization": "Token token=" + authorizationToken,
      "Accept": "application/vnd.pagerduty+json;version=2"
    }
  },
  options));
}

Answer 1

故障安全方式是使用Array.prototype.find(callback[, thisArg])：

find()方法返回数组中第一个满足提供的测试函数的元素的值。否则返回undefined。

var contact_method = data.user.contact_methods.find(method => method.type === "phone_contact_method");
if (contact_method !== undefined) {
    $('.Phone').html(contact_method.address);
}

var data = {
  "user": {
    "name": "John Smith",
    "email": "mtirza@xxxxxxxxx.com",
    "contact_methods": [{
      "id": "P6G5LDE",
      "type": "email_contact_method",
      "address": "mtirza@xxxxxxxxx.com",
    }, {
      "id": "PV67YL2",
      "type": "phone_contact_method",
      "address": "123456",
    }]
  }
};

$('.Name').html(data.user.name);     // John Smith
$('.Email').html(data.user.email);   // mebmirza@xxxxxxxxx.com
$('.Phone').html(data.user.contact_methods[1].address); // 123456

var contact_method = data.user.contact_methods.find(method => method.type === "phone_contact_method");
if (contact_method !== undefined) {
  $('.Phone').html(contact_method.address);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Name: <span class="Name"></span></p>
<p>Email: <span class="Email"></span></p>
<p>Phone: <span class="Phone"></span></p>

Answer 2

一般情况下（例如，除非webservice明确定义它），否则不应假设任何数组中元素的顺序。如果您想根据特定属性的存在或值找到一个特定元素，那么您将不得不遍历该数组。

假设您满足于将第一个数组元素i取为data.user.contact_methods[i].type == 'phone_contact_method'，那么您可以使用find()方法，如下所示：

function Request(endpoint, options) {
    //...
    success: function(data) {
    $('.Name').html(data.user.name);     // John Smith
    $('.Email').html(data.user.email);   // mebmirza@xxxxxxxxx.com

    var address = data.user.contact_methods.find(function (el) {
        return el.type == 'phone_contact_method';
    });

    $('.Phone').html(address); // 123456
},
// ...

find方法使用您指定的函数来从数组中选择元素。

在API GET请求JSON数据中查找值

2 个答案: