Searching JSON with jQuery by Keyword

Question

I'm trying to search JSON specifically by keyword. I've successfully searched by an ID, which in the code below, is "tags". Though, what I want to do is, search within the ID of "tags" but by the keyword of "depreciated". Only the bracketed in JSON that say "depreciated" will be selected. Then the title and uri will be pulled from that and written to the document, like I have in my code.

How might I go about doing a keyword search with my current code? If my logic is hard to understand, please let me know in the comments. Thanks in advance :)

Note: This is exactly the JSON format in which the data will be used.

Here's my code:

<script type='text/javascript'>
  window.onload=function(){
  var data = {
         "Feed": [
           {
              "categories":[
              "Depreciated",
              "Test"
              ],
              "content":"",
              "tags":[
              "Depreciated",
              "Test"
              ],
              "title":"Visual Design",
              "uri":"google.com"
            },
            {
               "categories":[
               "Depreciated"
               ],
               "content":"",
               "tags":[
               "Depreciated"
               ],
               "title":"Typography",
               "uri":"google.com"
             }
         ]
      },
      res = JSON.search( data, '//*[tags]' );

  for (var i=0, str=''; i<res.length; i++) {
      str += '<a href="' + res[i].uri + '">Link</a>' + res[i].title + '<br/>';
  }

  document.getElementById('output').innerHTML = str;
  }
</script>

Not sure why someone down-voted your question, it's an excellent question. — Difster, Aug 07 '17 at 22:23
You can iterate over your json object and test for whatever you want. https://stackoverflow.com/questions/684672/how-do-i-loop-through-or-enumerate-a-javascript-object — Difster, Aug 07 '17 at 22:25
I see, so essentially I can call the first $key being "tags" and listen for the second, third, and beyond? — , Aug 07 '17 at 22:30

score 0 · Accepted Answer · answered Aug 07 '17 at 22:33

0

There's no need to use jQuery for this. Try something like this instead:

function getTitlesByTag(arr, tag) {
  return arr.filter(function(item) {
     return item.tags.includes(tag)
  }).map(function(item) {
    return return {
      title: item.title,
      uri: item.uri
    }
  })
}

Array.prototype.includes has no IE support, so if you're concerned about that you can swap that check out for indexOf like so:

function getTitlesByTag(arr, tag) {
  return arr.filter(function(item) {
     return item.tags.includes(tag)
  }).map(function(item) {
    return {
      title: item.title,
      uri: item.uri
    }
  })
}

answered Aug 07 '17 at 22:33

shadymoses

3,273
1
19
21

shadymoses, thank you for the code walk-thru and example. This is helpful! Trying to understand your code and Will's - your method, is it breaking down the JSON into a more understandable array and then it's placed into a function to be accessed? – Aug 08 '17 at 00:04
Yes. The relevant data you're looking for is an array, so if you can always rely on that structure then you can just point directly to it. Working with arrays is very convenient. You don't have to have a separate function if the code doesn't need to be abstracted. – shadymoses Aug 08 '17 at 02:44

score 0 · Answer 2 · answered Aug 07 '17 at 22:39

0

shadeymoses was faster than me, but essentially you just need filter() and map().

var data = {
  "Feed": [{
      "categories": [
        "Depreciated",
        "Test"
      ],
      "content": "",
      "tags": [
        "Depreciated",
        "Test"
      ],
      "title": "Visual Design",
      "uri": "google.com"
    },
    {
      "categories": [
        "Depreciated"
      ],
      "content": "",
      "tags": [
        "Depreciated"
      ],
      "title": "Typography",
      "uri": "google.com"
    }
  ]
};

let results = data.Feed.filter(el => el.tags.includes('Depreciated')).map(el => ({
  uri: el.uri,
  title: el.title
}));

console.log(results);

answered Aug 07 '17 at 22:39

Will

3,201
1
19
17

Thanks Will! This is very helpful as well. Filters make sense. Just so I understand, a Filter will separate the data into chucks for a variable? – Aug 08 '17 at 00:01
1

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter It iterates over an array and returns a (usually smaller ) array. – Will Aug 08 '17 at 00:20
What are your thoughts on a return of null? – Aug 08 '17 at 01:17

Searching JSON with jQuery by Keyword

2 Answers2