Inner HTML Parse JSON to HTML a tag not working proprely

Question

I have an url where I am trying to get the data and using Jquery inner html I am trying to display the url present in the json as a tag in html

code

<script>    
    $.ajax({
      url: 'http://cybersecurity.apievangelist.com/apis/news/ ',
      type: 'GET' // this is default, but worth pointing out
    }).done(function(data){
      var objone = JSON.parse(data);
          for (i in objone) {
                $('#myContent').append("<div class='well'><a href= " + objone[i].url + ">" + objone[i].title +"</a><br /></div>");
          }
    });

</script>

<div class="container" id="myContent">
</div>

for some objects in json the a tags are working properly for some the a tag is not woking

OutPut

I have done the inspect for the objects where a tag is not working properly the a tag the data where it should be inside the a tag is being printed outside

Please help me as how to get this corrected. Thanks advance !!

Answer 1

It works for me by just adding single quote between the href value. Like this:

$('#myContent').append("<div class='well'><a href='" + objone[i].url + "'>" + objone[i].title +"</a><br /></div>");

Answer 2

From your screenshot, I can see few strings are coming in between Anchor tags, but few strings are coming after anchor tag.

For example the first one from your screenshot Swagger with WSO2 is coming after the closed anchor tag but Why you should your API.... is coming in between anchor tags. So you should follow the same standard for everything heading should come in between anchor tags so everything behaves same.