How to filter JSON data to show fields by certain words?-CodePudding

I'm looking for a way to get a URL from JSON data that matches certain words. I'm not familiar with JSON but my JSON data looks like this:

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
      }
    ]
  }
};

And my AJAX function is below. What it does is get JSON data and then store them in a value in a field:

$.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',
});

What I'm trying to do is show the href if rel[0].twitter. Something like:

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)));
}

CodePudding user response：

You can filter each object by whether twitter is included in the rel array:

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}],},};

const filterBy = toFilter => {
  return data.links.thumbnail.filter(({ rel }) => rel.includes(toFilter));
};

console.log(filterBy("twitter"));

.as-console-wrapper { max-height: 100% !important; top: auto; }

You can also just extract the href from those if you'd like only the URL associated with the item:

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}],},};

const filterBy = toFilter => {
  return data.links.thumbnail.filter(({ rel }) => rel.includes(toFilter)).map(({ href }) => href);
};

console.log(filterBy("twitter"));

.as-console-wrapper { max-height: 100% !important; top: auto; }