如何按特定关键词过滤JSON数据获取匹配的目标字段值

我需要从JSON数据中提取匹配特定关键词的URL，目前对JSON尚不熟悉，所持有的JSON数据结构如下：

const data = {
  "links": {
    "thumbnail": [{
        "href": "https://media.wwltv.com/assets/WWL/images/d111cadc-2ca1-4cfc-adec-422d9228e6a0/d111cadc-2ca1-4cfc-adec-422d9228e6a0_1920x1080.jpg",
        "rel": [
          "thumbnail",
          "ssl"
        ],
        "type": "image/jpg",
        "content_length": 123865,
        "media": {
          "width": 1920,
          "height": 1080
        }
      },
      {
        "href": "https://media.wwltv.com/assets/WWL/images/b9c0109f-f504-4330-9dbb-5d0461316d00/b9c0109f-f504-4330-9dbb-5d0461316d00_1140x641.jpg",
        "type": "image/jpg",
        "rel": [
          "twitter",
          "thumbnail",
          "ssl",
          "og"
        ],
        "media": {
          "width": 1140,
          "height": 641
        },
        "content_length": 94781
      }
    ]
  }
};

当前使用的AJAX函数如下，功能为发起GET请求获取JSON数据后，将指定值存储到对应表单字段中：

$.ajax({
      type:"GET",
      url: "https://iframe.ly/api/iframely?url=" + link_raw.value + "&api_key=xxx",
      success: function(data) {
               $(".acf-fields div.acf-field.acf-field-text.acf-field-62a253c405887 div.acf-input div.acf-input-wrap input").val(JSON.parse(JSON.stringify(data.links.thumbnail[0].href)));
       },
       dataType: 'JSON',
});

需要实现的逻辑：当thumbnail数组中某一项的rel属性包含"twitter"时，提取该项的href值填充到目标input字段。此前预想的逻辑写法有误，不清楚正确实现方案，错误写法参考：

if (filter == rel[0].twitter) {
    $(".acf-fields div.acf-field.acf-field-text.acf-field-62a253c405887 div.acf-input div.acf-input-wrap input").val(JSON.parse(JSON.stringify(data.links.thumbnail)));
}

核心逻辑是遍历data.links.thumbnail数组，匹配rel数组包含twitter的项，取对应href赋值即可，注意两个问题：

• 接口设置了dataType: 'JSON'时，返回的data本身就是解析完成的JS对象，不需要额外做JSON.parse(JSON.stringify())冗余转换
• rel是数组，twitter是数组内的元素，不是数组项的属性，不能用rel[0].twitter的写法取值，且twitter不一定固定在数组第一个下标位置，要用数组的includes()方法判断是否存在目标值

修正后的完整代码：

$.ajax({
  type:"GET",
  url: "https://iframe.ly/api/iframely?url=" + link_raw.value + "&api_key=xxx",
  success: function(data) {
    // 缓存目标输入框对象，避免重复写长选择器
    const $targetInput = $(".acf-fields div.acf-field.acf-field-text.acf-field-62a253c405887 div.acf-input div.acf-input-wrap input");
    // 查找第一个rel包含twitter的缩略图项
    const matchedThumb = data.links.thumbnail.find(item => item.rel.includes("twitter"));
    // 匹配到内容时再赋值，避免空值报错
    if (matchedThumb) {
      $targetInput.val(matchedThumb.href);
    }
  },
  dataType: 'JSON'
});

如果需要获取所有rel包含twitter的项，可以把find()换成filter()，遍历返回的结果集逐个处理即可。

内容的提问来源于stack exchange，提问作者Gregory Schultz