serialize HTML tags/objects in javascript

Question

I know there are a lot of questions on serializing objects in Javascript, but I'm trying to serialize a string to JSON objects after using the method .getData() from one of the APIs for later use. It returns a string, but I can't get any attributes.

Here is an example of what I did. I need to serialize this to a JSON object, but it just returns me this type of object. Is there a way that I can get the source of this audio element after serializing it with JSON.stringtify() ?

https://i.stack.imgur.com/aOv76.jpg

Answer 1

You can use JSON.parse(theSerializedElement), set it as the innerHTML of an HTML element that you can dynamically create and then use DOM methods to get the attribute.

Answer 2

If I am understanding you correctly you want to serialize DOM element's attributes or some of them, or may be data attached to it. You will need to iterate through them on your own.

Answer 3

So you have some HTML as a string, and you want to get the value of an attribute in the audio tag?

EDIT: Assuming your string is in the data variable.

If you're using jQuery:

var source = jQuery(data).attr('src');

Without jQuery, it's still fairly straightforward.

var container = document.createElement('div');
container.innerHTML = data;
var source = container.querySelector('audio').getAttribute('src');