CODEWITHSUNDEEP
javascriptjqueryjson
Ken Sharp
Ken Sharp

Reputation: 1054

JavaScript: Why do I end up with "quotes" in my HTML?

This rather short piece of code:

<div id='votmplayer'></div>
<script>

  $.getJSON('/json/votm.json', function(votmjson) {
    $.getJSON('/cgi-bin/getvideo.cgi?'+votmjson.videos[0].id, function(votmchoice) {
      document.getElementById('votmplayer').innerHTML=votmchoice.embed.code;
        });
    });

</script>

Is producing unexpected output. The rendered HTML shows:

<div id='votmplayer'>
  "<iframe src="http://www.website.com/embed/abcdefghij123456" frameborder="0" width="608" height="468" scrolling="no"</iframe>"
</div>

Which of course gives me the <iframe> as literal text. I have tried the following but the result is the same:

var choice = votmchoice.embed.code;
document.getElementById('votmplayer').innerHTML=choice;

console.log(votmplayer) is showing the following in Chome:

embed: Object
    code: "&lt;iframe src=&quot;http://www.website.com/embed/abcdefgij1234565&quot; frameborder=&quot;0&quot; width=&quot;608&quot; height=&quot;468&quot; scrolling=&quot;no&quot;&gt;&lt;/iframe&gt;"

I'm left a bit perplexed as I have used similar code elsewhere in the webpage and it is rendered correctly. I can't find anything similar around Google but maybe I'm asking the wrong question.

Upvotes: 0

Views: 147

Answers (2)

Ruben Yeghikyan
Ruben Yeghikyan

Reputation: 497

If your response text is correct this should be helpful

 $.getJSON('/json/votm.json', function(votmjson) {
    $.getJSON('/cgi-bin/getvideo.cgi?'+votmjson.videos[0].id, function(votmchoice) {
       if(votmchoice && votmchoice.embed && votmchoice.embed.code) {  
         $('#votmplayer').html(votmchoice.embed.code);
       }
    });
 });

UPDATE:

try to log votmchoice.embed.code

console.log(votmchoice.embed.code);

if it returns shows something like this "<iframe src="http://www.website.com/embed/abcdefghij123456" frameborder="0" width="608" height="468" scrolling="no"</iframe>"

You should fix your response from server, or just remove quotes from string like this:

demo

var str = '"<iframe src="http://www.website.com/embed/abcdefghij123456" frameborder="0" width="608" height="468" scrolling="no"</iframe>"';
console.log(str.slice(1,-1));

Upvotes: -2

Reyraa
Reyraa

Reputation: 4294

You're using JQuery (I'm I right?). So:
JQuery can create nodes from strings like:

$('<h1>Heading</h1>')

Which returns a JQuery DOM element. and Also it has a method to convert HTML-reduced string to HTML string and create JQuery nodes from it:

$('#votmplayer').html( $.parseHTML(votmchoice.embed.code)[0].textContent );

I've created a working fiddle

Upvotes: 3

Related Questions