#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    2
    Rep Power
    0

    Question How to search within an array of a json file?


    I have the attached json data that I have fetched with an API from commafeed.com. I am using it to curate my webpage here: http://faculty-fight...jfdeoijn/tiles/. I would like to also include an image of each news post. Which is within the "content" array. However, within the content array is also the actual content. How can I only extract the image URL so that I can .append it to my <div></div> as a background-image?

    Over at stackoverflow somebody suggested:

    Code:
    jQuery(data.entries[0].content.match(/<[^>]+>/)[0]).appendTo('.para');
    Which is a great start, but I only need the Http://www.url.de/someimage.jpg. I tried Regex (http://gskinner.com/RegExr/), but I either get an unknown token error or an Uncaught TypeError: Cannot read property '0' of undefined error. I am starting to figure the problem is over at http://faculty-fight.de/jquery/ where I fetch my data.

    What do you guys think?


    My jquery looks like this:
    Code:
     
    $("#puttiles").ready(function (event) { $.ajax({ type: 'GET', url: "source", dataType: 'json', success: function (jso) { $.each(jso.entries, function (entryIndex, entry) { $('#puttiles').append("<div class='element'>" + this.content.match(/<[^>]+>/)[0] + "<div class='story-tile-byline'><div class='tile-title'> " + this.title + "</div><div class='source;>Gizmodo</div></div></div>"); }); } }); });
    My json like this:

    Code:
    {
      "name": "Aktuell - FAZ.NET",
      "message": null,
      "errorCount": 0,
      "feedLink": "http://www.faz.net/aktuell/",
      "timestamp": 1375222681971,
      "hasMore": true,
      "entries": [
        {
          "id": "2011990942",
          "guid": "http://www.faz.net/-hoz-7bwlz",
          "title": "Keine „Unterstützung des Feindes“ durch Bradley Manning",
          "content": "<img width=\"190\" height=\"107\" title=\"Eine Unterst&uuml;tzerin von Manning vor dem Milit&auml;rgericht in Fort Meade\" alt=\"Eine Unterst&uuml;tzerin von Manning vor dem Milit&auml;rgericht in Fort Meade\" src=\"http://media1.faz.net/polopoly_fs/1.2312835!/image/2672702860.jpg_gen/derivatives/article_teaser/2672702860.jpg\" /><p>Der Wikileaks-Informant Bradley Manning ist von einem Milit&auml;rgericht in 19 von 21 Anklagepunkten schuldig gesprochen worden. Freigesprochen wurde er vom Vorwurf der „Unterst&uuml;tzung des Feindes“. Damit droht ihm keine Todesstrafe.</p>",
          "rtl": false,
          "author": null,
          "enclosureUrl": null,
          "enclosureType": null,
          "date": 1375204740000,
          "insertedDate": 1375212854000,
          "feedId": "97761879",
          "feedName": "Aktuell - FAZ.NET",
          "feedUrl": "http://www.faz.net/rss/aktuell/",
          "feedLink": "http://www.faz.net/aktuell/",
          "iconUrl": "https://www.commafeed.com/rest/feed/favicon/97761879",
          "url": "http://www.faz.net/aktuell/politik/ausland/amerika/wikileaks-informant-keine-unterstuetzung-des-feindes-durch-bradley-manning-12312791.html",
          "read": true,
          "starred": false,
          "markable": true
        }}
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    101
    Rep Power
    27
    To extract that image's URL out of the "content" property, you could first load the string as a node using jQuery - pass it to the jQuery function, the default behavior when given a string is to parse the string for HTML nodes. Then you can find() the image and extract its src attribute.
    Code:
    // pretend we're inside the $.each() loop over entries here
    var imgSrc = $(entry.content).find("img").attr("src");
    // boom, now the image's URL is in the imgSrc var and you can use it for anything
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    2
    Rep Power
    0
    Hey thanks for your reply and making it work! i also used this which worked to
    Code:
    this.content.match('src="(.*)"')[1]
    However, plus one for you!
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    101
    Rep Power
    27
    Regular expressions are bad and you should feel bad every time you think of using one.
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,129
    Rep Power
    4304
    Originally Posted by mod_speling
    Regular expressions are bad and you should feel bad every time you think of using one.
    Don't be a troll. RegEx is sometimes overused (especially when an HTML or XML parser would be more appropriate) and can cause performance issues, but they are a powerful tool.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    101
    Rep Power
    27
    My bad, I forgot to use the tongue-in-cheek tag.

    But seriously, don't use regular expressions to process structured data like html markup because it's nearly always a horrible idea.

IMN logo majestic logo threadwatch logo seochat tools logo