how to pass the value in href tag using jquery with json

[rpv_sen]

Hi

I am working on displaying json data in ul li with href, i can able to print only

but my expected output should be as below

<script type="text/javascript">
          var data=  {"query":{"simple_query_string":{"query":"A*"}}};
            $.ajax({ 
            type: 'POST', 
            //url: 'data.json', 
            url: 'urllink',
            dataType: 'json',           
            success: function (data) {

                arr= data.hits.hits;
                $.each(arr, function( index, value ){
                t='<li><a href="#'+value._id+'" data-toggle="tab">'+value._source.title+'</a></li>' ;
                    console.log(t);
        //          t=value._source.title;

                    $('#metric_id').append($('<ul>' ,{

                         text:t
                    }));

});

            },

            });
        </script>

        <div id="metric_id"></div>

Please help me to fix the issue.

[jkon]

Hello rpv_sen , there are many things in your code that could be better but I will not stand on those (only mentioning that when you have a variable inside a function you should declare it with var in front , also you don't check if the result data.hits and data.hits.hits exists before proceeding it and many more). First of all lets understand what you want to do.
I guess that you want to create a ul from the data that you received through the call and then append it in the #metric_id dom. If so before starting the each function just have:

var $metricUl = $("<ul></ul>");

Then inside the each

var t='<li><a href="#'+value._id+'" data-toggle="tab">'+value._source.title+'</a></li>';
$metricUl.append($(t));

You can delete the $('#metric_id').append that you have inside the each
When you finish with the each iteration then you append to $('#metric_id')

$('#metric_id').append($metricUl);