Order json data with title and related title values-CodePudding

I have this data array that I am sorting by last name

JSON.parse(data).sort(function (a, b) {
      return a.user_last.localeCompare(b.user_last);
});

Here is a sample that I get after the sorting:

{"title": "Dr.","first_name": "Pennie","last_name": "Abramson"},
{"title": "Prof.","first_name": "David","last_name": "Amob"},
{"title": "Prof.","first_name": "Dash","last_name": "Arnon"},
{"title": "Prof.","first_name": "Haim","last_name": "Bling"},
{"title": "Prof.","first_name": "Wow","last_name": "Bold"},
{"title": "Dr.","first_name": "Ron","last_name": "bondel"},
{"title": "Dr.","first_name": "katty","last_name": "Contor"},
{"title": "Prof.","first_name": "Ranny","last_name": "Cometon"},
{"title": "Dr.","first_name": "Roven","last_name": "Co"}

I would like to order the names in a list under the title

Title - A all the last_names on value last_name that starts with A

Title - B all the last_names on value last_name that starts with B

Title - C all the last_names on value last_name that starts with C

and so on...

this is the code I have now.. the problem I get the title above every name

 $.each(JSON.parse(data), function (i, item) {
                 var letter = JSON.parse(data);
                console.log(JSON.parse(data));
                if(item.socket_id !== '0' && item.user_last.charAt(0) == item.user_last[0].charAt(0) ){
                    $("#watching-window").append('<div >' item.user_last[0].charAt(0) '</div><ul><li>' item.user_title ' ' item.user_first ' ' item.user_last '<li></ul>').fadeIn(400)
                }

            });

how can I order it correctly

Output example

<div class="watching-window" id="watching-window"><div class="letter">A</div><ul><li>Mrs. Pennie Abramson</li><li></li></ul><div class="letter">A</div><ul><li>Mr. Gary M. Abramson</li><li></li></ul><div class="letter">A</div><ul><li>Mr. Alfredo Achar</li><li></li></ul><div class="letter">A</div><ul><li>Dr. Carole Ackermann</li><li></li></ul><div class="letter">A</div><ul><li>Mrs. Karen Aiach</li><li></li></ul><div class="letter">A</div><ul><li>Dr. Mark Alexander</li><li></li></ul><div class="letter">A</div><ul><li>Lord David Alliance</li><li></li></ul><div class="letter">A</div><ul><li>Mr. Ilan Artzi</li><li></li></ul><div class="letter">B</div><ul><li>Prof. Paolo Barbanti</li><li></li></ul><div class="letter">B</div><ul><li>Mr. Stephen Barclay</li><li></li></ul><div class="letter">B</div><ul><li>Prof. Allen J. Bard</li><li></li></ul><div class="letter">B</div><ul><li>Prof. Istvan Barna</li><li></li></ul><div class="letter">B</div><ul><li>Dr. Carolyn Barshall</li><li></li></ul><div class="letter">s</div><ul><li>sdfg 345 sdfg</li><li></li></ul><div class="letter">D</div><ul><li>Mr Demo Demo</li><li></li></ul></div>

CodePudding user response：

You oculd store the letter and if the ltter is changing, add a new letter line.

const
    data = [{ title: "Dr.", first_name: "Pennie", last_name: "Abramson" }, { title: "Prof.", first_name: "David", last_name: "Amob" }, { title: "Prof.", first_name: "Dash", last_name: "Arnon" }, { title: "Prof.", first_name: "Haim", last_name: "Bling" }, { title: "Prof.", first_name: "Wow", last_name: "Bold" }, { title: "Dr.", first_name: "Ron", last_name: "bondel" }, { title: "Dr.", first_name: "katty", last_name: "Contor" }, { title: "Prof.", first_name: "Ranny", last_name: "Cometon" }, { title: "Dr.", first_name: "Roven", last_name: "Co" }];

data.forEach(((letter, ul) => o => {
    if (letter !== o.last_name[0].toUpperCase()) {
        letter = o.last_name[0].toUpperCase();
        ul = document.createElement('ul');
        document.body.appendChild(document.createTextNode('Letter '   letter));
        document.body.appendChild(ul);
    }
    const li = document.createElement('li');
    li.innerHTML = o.last_name;
    ul.appendChild(li);
})());

.as-console-wrapper { max-height: 100% !important; top: 0; }