Special characters from json break html

Question

I'm using api and these is an ' in a json and it breaks my html.

 function heroSkills(id){
      heroSkill = [];
        $.ajax({
          type: "GET",
          async: false,
          url: "js/champs_v2.json",
          dataType: "json",
          success: function(data){
            $(data.data).each(function(index,value){
              var listSkills = value;
              for(ls in listSkills){

                if(listSkills[ls].id == id){
                //  console.log(listSkills[ls].passive.image.full);
                    heroSkill.push({passive_name:listSkills[ls].passive.name,passive_description:listSkills[ls].passive.description,passive_image:listSkills[ls].passive.image.full});

                    for(la in listSkills[ls].spells){
                      champSkill = listSkills[ls].spells[la];
                      skillImage = champSkill.image.full;
                      skillDescription = champSkill.description;
                      skillName = champSkill.name;
                      heroSkill.push({skill_name:skillName,skill_description:skillDescription,skill_image:skillImage});
                    }
                }
              }
            });
            heroSkill.push({version:data.version});
          }
        });

        return heroSkill;

    }

then i output it like this

      var AhriTest = heroSkills("40");
      console.log(AhriTest);
      $('.passive').append("<img src='http://ddragon.leagueoflegends.com/cdn/"+AhriTest[5].version+"/img/passive/"+AhriTest[0].passive_image+"' class='imageClipSmall img-responsive' alt='pas' data-toggle='tooltip' data-html='true' data-placement='right' title=' <p> <h5> " + AhriTest[0].passive_name + " </h5> <small>" + AhriTest[0].passive_description + " </small> </p>' >");

      $('.HeroSkillQ').append("<img src='http://ddragon.leagueoflegends.com/cdn/"+AhriTest[5].version+"/img/spell/"+AhriTest[1].skill_image+"'  class='imageClipSmall' alt='pas' data-toggle='tooltip' data-html='true' data-placement='right' title=' <p> <h5> " + AhriTest[1].skill_name + " </h5> <small>" + AhriTest[1].skill_description + " </small> </p>' >");
      $('.HeroSkillW').append("<img src='http://ddragon.leagueoflegends.com/cdn/"+AhriTest[5].version+"/img/spell/"+AhriTest[2].skill_image+"'  class='imageClipSmall' alt='pas' data-toggle='tooltip' data-html='true' data-placement='right' title=' <p> <h5> " + AhriTest[2].skill_name + " </h5> <small>" + AhriTest[2].skill_description + " </small> </p>' >");
      $('.HeroSkillE').append("<img src='http://ddragon.leagueoflegends.com/cdn/"+AhriTest[5].version+"/img/spell/"+AhriTest[3].skill_image+"'  class='imageClipSmall' alt='pas' data-toggle='tooltip' data-html='true' data-placement='right' title=' <p> <h5> " + AhriTest[3].skill_name + " </h5> <small>" + AhriTest[3].skill_description + " </small> </p>' >");
      $('.HeroSkillR').append("<img src='http://ddragon.leagueoflegends.com/cdn/"+AhriTest[5].version+"/img/spell/"+AhriTest[4].skill_image+"'  class='imageClipSmall' alt='pas' data-toggle='tooltip' data-html='true' data-placement='right' title=' <p> <h5> " + AhriTest[4].skill_name + " </h5> <small>" + AhriTest[4].skill_description + " </small> </p>' >");

json it self is way to big to post it so here just a screen of makes a problem http://puu.sh/fAnBB/f735ab544c.png/Untitled-4.png if needed can post it all.

Answer 1

One way of handling this type of issue is to use double quotes while passing attributes

$('.passive').append("<img src=\"http://ddragon.leagueoflegends.com/cdn/"+AhriTest[5].version+"/img/passive/"+AhriTest[0].passive_image+"\" class=\"imageClipSmall img-responsive\" alt=\"pas\" data-toggle=\"tooltip\" data-html=\"true\" data-placement=\"right\" title=\" <p> <h5> " + AhriTest[0].passive_name + " </h5> <small>" + AhriTest[0].passive_description + " </small> </p>\" >");

You can repeat escaping double quotes for the remaining, that will prevent the string from breaking apart while concatenating.

Also just for your information, tags in title attribute have no effect unless they are processed by javascript in some way.