Using AngularJS to fetch images from RSS feed description

I'm currently learning AngularJS by creating a simple RSS feed. I have successfully made a JSON request and fetched all the data including title, link, description, and images from the RSS feed I parsed. The code snippet for extracting images looks like this:

angular.forEach(feed.entries, function(value){
        value.myImage = $(value.content).find('img').eq(0).attr('src');
        console.log('image' + value.myImage);
}

However, some feeds have a different structure where images are placed inside 

<description> </description>
, such as in this example. I am trying to retrieve images from these feeds using the following method:

angular.forEach(feed.entries, function(value){
    value.myImage = $(value.description).find('img').eq(0).attr('src');
    console.log('no image' + " " + value.myImage);
});

Unfortunately, I keep getting 'undefined' when trying to display the image from these feeds. I've tried various approaches but seem to be stuck. Any assistance would be greatly appreciated!

Thank you :)

Below is the JSON object I receive:

Object {feedUrl: "https://www.behance.net/rss", title: "Behance Featured Projects", link: "http://www.behance.net", author: "", description: "The latest projects featured on Behance"...}
$$hashKey: "027"
author: ""
description: "The latest projects featured on Behance"
entries: Array[10]
0: Object
$$hashKey: "029"
author: ""
categories: Array[0]
content: "<img src="https://mir-s3-cdn-cf.behance.net/projects/404/2e322a33145177.Y3JvcCw4ODMsNTI5LDAsNzc.jpg" style="float:left;margin-right:15px"><br> Various Illustrations by Patryk Hardziej / 2015"
contentSnippet: "Various Illustrations by Patryk Hardziej / 2015"
link: "https://www.behance.net/gallery/33145177/Various-Illustrations-2015"
publishedDate: "Thu, 28 Jan 2016 08:00:02 -0800"
sImage: undefined
title: "Various Illustrations 2015"
javascriptangularjsrss

Answer №1

Ah, I believe I have discovered the solution :)

It appears that the HTML obtained from the query resembles this:

<img src="..."> Some text <br/> Some text ...

The find method is designed to locate child nodes. In this scenario, the img element is not a child of value.content, causing it to return nothing.

To work around this issue, you can try the following approach:

angular.forEach(feed.entries, function(value){
  // Create a root node to ensure the find method works in all cases
  var content = '<div>'+value.content+'</div>';
  value.myImage = $(content).find('img').eq(0).attr('src');
  console.log('image' + value.myImage);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display intricate header and preview in a printed datatable

Hey there, I've been using the Datatable plugin and it's really great. However, I've come across a problem with complex headers like this: <thead> <tr><td>some text</td></tr> <tr><td>some te ...

javascripthtmldatatable

Ways to acquire dynamic content without relying on Remark/Grey Matter

In my stack of technologies, I am using nextJS with react and typescript. While I have successfully set dynamic routes for my blog posts, I am now facing a challenge in creating pages that do not rely on markdown. Despite searching extensively for code exa ...

javascriptreactjsnext.js

What could be causing the JSF ajax status success to fail in Chrome?

Whenever I trigger an action in my ManagedBean, I also initiate a JavaScript function via JSF ajax to display a loading popup while the action is being processed. This functionality works flawlessly in Firefox, however, it seems to encounter issues in Chro ...

javascriptjqueryajaxgoogle-chromejsf

The revalidateTag and revalidatePath features in Next.js are currently not functioning as expected

I attempted to utilize the revalidateTag and revalidatePath functions with Next.js version 14.2.3. The objective was: there is a server action to fetch a list of items. also, there is a server action to add an item. upon successful addition of an item, I ...

javascriptreactjstypescriptnext.jsserver-action

Is it possible to use JQuery to target input nodes based on their values?

How can I check if any of the file input boxes in my list have a value using just one selector statement? Is it possible to achieve this with code like the following: $('input:file[value!=null]') Or is there another way to accomplish this? ...

javascriptjquery

Creating connections between variables and elements in nested ngRepeats in Angular

I've been facing a challenge with my app where I need to update the comments section whenever a comment is added, edited, or deleted without having to refresh the page. I am using ngResource to handle queries for both articles and comments (e.g. $scop ...

javascriptangularjsscope

Using $window.print() in angularjs results in the print preview displaying an empty page

Encountering a strange issue where using $window.print in angularjs results in only the date, page name, page number, and url appearing on the printed page. The rest of the content is missing even though the original page has plenty of it. I suspect the p ...

javascripthtmlcssangularjsprinting

"Concealing tooltip boxes in Vue: A step-by-step guide

I am trying to achieve a functionality where a tooltip box appears on each incorrect or empty input field when the 'Save' button is pressed. I have been able to display the tooltip boxes upon clicking the 'Save' button, but the issue ar ...

javascriptvue.js

Create new instances of Backbone Models using an existing Backbone Model as a template

Within my app, I am planning to include a configuration file called config.json as a Backbone Model. Here is an example of how it will be loaded: var Config = Backbone.Model.extend({ defaults: { base: '' }, url: 'config. ...

javascriptjsonbackbone.jsbackbone-model

I'm having trouble persisting my mongoose model data in my MongoDB database

Hey there, I'm new to this and currently attempting to save the Amadeus object I've created into mongosh using the .save() method. However, after connecting to my file through node, editing the Amadeus object, and running amadeus.save(), I check ...

javascriptnode.jsmongodbmongoose-schema

Updating a numeric field in Mongoose by a percentage of its current value

Looking for a way to reduce prices of items in Mongoose. { name:"itemname", price: 30 } I want to apply a 10% reduction to the price, but $inc and $mul won't work for this scenario. {$mul: {price:0.10}} This code would reduce the price to 10% of t ...

javascriptnode.jsmongoose

When working with React, encountering a "TypeError: is not a function" message from a function prop can

I am a beginner with React and I'm attempting to pass a function as a prop to a child component. In this scenario, the parent component looks like this: const [gameStarted, setGameStarted] = useState(false); const [gameSettings, setGameSettings] = use ...

javascriptreactjsreact-propsreact-functional-component

Utilize ngx-filter-pipe to Streamline Filtering of Multiple Values

Need assistance with filtering an array using ngx-filter-pipe. I have managed to filter based on a single value condition, but I am unsure how to filter based on multiple values in an array. Any guidance would be appreciated. Angular <input type="text ...

javascriptangulartypescript

Developing a progress bar with jQuery and Cascading Style Sheets (

Below is the code I'm currently using: <progress id="amount" value="0" max="100"></progress> Here is the JavaScript snippet I have implemented: <script> for (var i = 0; i < 240; i++) { setTimeout(function () { // this repre ...

javascriptjqueryhtmlcss

Damaged background in Bootstrap interface modal

https://i.stack.imgur.com/nTAnK.png Is there anyone who can assist me in identifying the issue causing the broken or irregular backdrop in the background of overlays or pop-ups? $scope.Modal = $modal.open({ animation: true, ...

cssangularjsangular-ui-bootstrapbootstrap-modal

What is the best way to pause the function execution until the ajax call is finished?

I have the following code snippet: function validate(){ if (document.getElementById('<%=txtSeqNo.ClientId %>').value.trim() == "") { alert('Please enter Sequence number.'); return false; } var result = checkduplicateseq( ...

javascriptjqueryajax

Unable to get the deletion functionality to work for Dropzone.js and PHP script

I am currently using dropzone to handle file uploads. My goal is to delete the files on the server when the user clicks on the removeLink. I have implemented an Ajax function that calls a .php site for this purpose. However, I am facing an issue where I am ...

javascriptphpajaxdropzone.js

Validating Forms and Files with jQuery and C# in ASP.NET

I'm facing some uncertainty on how to effectively combine jquery/javascript with C#. My task is to incorporate a javascript confirm popup into a file upload form, but the confirm prompt should only appear if specific criteria are not met. There are 4 ...

c#asp.netjavascriptjquery

Angular Editable Pop-up

I have implemented Xeditable in my AngularJS application to allow users to modify table values on the fly without the need for buttons. I use the blur attribute to quickly submit changes inline. <a href="#" buttons="no" blur="submit">{{ myValue }}&l ...

angularjsx-editable

Error in Node-Fetch Mapping: Unable to access property 'map' of an undefined entity

Encountering an issue with the "map" section when attempting to run it - receiving an error message stating "Cannot read property 'map' of undefined" The customers constant is defined above, so I'm unsure where the undefined value is origin ...

javascriptarraysjsonasync-awaitaws-lambda