Question

I am trying to get listing organized by a field called letter.

So the fields are:

id, name, letter.

for example:

id name letter

1 list1 a
2 list2 a
3 list3 b

To list1 and list2 are added after id=”a” and list3 is added after id=”b”

Here is a json data sample:

{"id":[{"id":"1","name":"list1","letter":"a"},{"id":"2","name":"list2","letter":"b"}]}

The code below adds the contents to the listview but I need to go a step further and add then to their own place.

For example all listings with the letter “a” are added after the A

etc

Here is the code:

$.getJSON("list.json", function(data){
    var output = '';

    $.each(data.id, function(index, value){

        output += '<li><h1>' + value.name + '</h1></li>';

    });


    $('#listview').html(output).listview('refresh');

    }).error(function(args) {
console.log(args);

});

<ul id="listview">
<li id="a">A</li>
<!--Listings with letter A go here-->
<li id="b">B</li>
<!--Listings with letter B go here-->
<li id="c">C</li>
<!--Listings with letter C go here-->
</ul>

How can I get the listings for be added to its place?

Answer 1

$.each(data.id, function(index, value){ 

    $('<li><h1>' + value.name + '</h1></li>').insertAfter('#' + value.letter);

});