Myujth

I have a JSON response which is returning correctly and have successfully inputted data from it on my HTML page. However, this one JSON value returns some HTML code in which I do not need all of it, just the second anchor element. How would you guys do this?

The code below, the top two work fine. The P element does not. Any ideas? I just get undefined in the console.

 // get photo url from description JSON value. 

 var imageURL = $(description).find('a')[ 1 ];
 var parseImageURL = $(imageURL).attr('href');


 // get author URL from description JSON value

 var authorURL = $(description).find('a')[ 0 ];
 var parseAuthorURL = $(authorURL).attr('href');


 // get photo description from descriptions JSON value

 var descriptionText = $(description).find('P')[5];
 console.log(descriptionText);

Parse HTML

You need to "parse" the HTML. There's (at least) two ways to do it:

DOMParser or create an element and stuff the HTML string in there.

The following example shows the second method.

1. In my example, I assign some string to HTML but you are getting it in some object that you have parsed from JSON.


2. Create an element. Could be any old element, but I chose div
   


3. assign the HTML string to the innerHTML of the element created in step 2


4. use querySelectorAll to select the node you want. In this example, I selected all of the p elements.


5. I simply logged out the second p, but in your case, you add it to the page, I assume

let HTML = "<p>something</p><p>else</p>";

let el = document.createElement('div');
el.innerHTML = HTML;

let ps = el.querySelectorAll('p');
console.log(ps[1]);