Sort Data based on mla names-CodePudding

Hi I have this below Json Data

How i can show only mla name list in the UI and based on which mla has got more votes?

How i can achieve this one? help me with this

Thank you

[ { "id": 6, "mla": [ { "id": 16, "votes": 1, "name": "Shrimant", "image": "http://localhost:8000/media/uploads/images/assignment_image.png", "category": "MLA", "zipcode": 591320, "age": 49, "email": "[email protected]", "contact_number": 58966663144, "party": 1, "state": 4, "district": 5, "constituency": 6 }, { "id": 19, "votes": 3, "name": "Shetal Patil", "image": "http://localhost:8000/media/uploads/images/7_oHBWq6E.png", "category": "MLA", "zipcode": 591320, "age": 35, "email": "[email protected]", "contact_number": 8523697410, "party": 2, "state": 4, "district": 5, "constituency": 6 }, { "id": 20, "votes": 2, "name": "Raju Kage", "image": "http://localhost:8000/media/uploads/images/new1_MIaR3xQ.png", "category": "MLA", "zipcode": 591320, "age": 50, "email": "[email protected]", "contact_number": 8963257410, "party": 3, "state": 4, "district": 5, "constituency": 6 } ], "state": "Karanataka", "state_id": 4, "district": "Belgavi", "district_id": 5, "constituency": "Kagwad" }, { "id": 7, "mla": [ { "id": 9, "votes": 1, "name": "Chandra Metal Mart", "image": "http://localhost:8000/media/uploads/images/2.png", "category": "MLA", "zipcode": 638103, "age": 23, "email": "[email protected]", "contact_number": 4294264242, "party": 1, "state": 4, "district": 5, "constituency": 7 }, { "id": 10, "votes": 3, "name": "Vaibhav", "image": "http://localhost:8000/media/uploads/images/4.png", "category": "MLA", "zipcode": 638103, "age": 34, "email": "[email protected]", "contact_number": 4294264242, "party": 2, "state": 4, "district": 5, "constituency": 7 }, { "id": 12, "votes": 2, "name": "MLA 1", "image": "http://localhost:8000/media/uploads/images/7.png", "category": "MLA", "zipcode": 638103, "age": 23, "email": "[email protected]", "contact_number": 4294264242, "party": 3, "state": 4, "district": 5, "constituency": 7 }, { "id": 21, "votes": 1, "name": "Gajanan", "image": "http://localhost:8000/media/uploads/images/WhatsApp_Image_2020-11-04_at_7.56.56_PM.jpeg", "category": "MLA", "zipcode": 638103, "age": 45, "email": "[email protected]", "contact_number": 4294264242, "party": 5, "state": 4, "district": 5, "constituency": 7 }, { "id": 22, "votes": 1, "name": "Pranav Singh", "image": "http://localhost:8000/media/uploads/images/WhatsApp_Image_2020-11-04_at_7.56.56_PM_W9hWtbF.jpeg", "category": "MLA", "zipcode": 638103, "age": 25, "email": "[email protected]", "contact_number": 4294264242, "party": 6, "state": 4, "district": 5, "constituency": 7 } ], "state": "Karanataka", "state_id": 4, "district": "Belgavi", "district_id": 5, "constituency": "Chikodi" }, { "id": 8, "mla": [], "state": "Karanataka", "state_id": 4, "district": "Dharwad", "district_id": 6, "constituency": "Navlgund" }, { "id": 9, "mla": [ { "id": 11, "votes": 3, "name": "Shetter", "image": "http://localhost:8000/media/uploads/images/images_2.jpg", "category": "MLA", "zipcode": 638103, "age": 23, "email": "[email protected]", "contact_number": 4294264242, "party": 1, "state": 4, "district": 6, "constituency": 9 }, { "id": 14, "votes": 0, "name": "Ramulu", "image": "http://localhost:8000/media/uploads/images/2_mK5SuIZ.png", "category": "MLA", "zipcode": 638103, "age": 27, "email": "[email protected]", "contact_number": 4294264242, "party": 3, "state": 4, "district": 6, "constituency": 9 }, { "id": 15, "votes": 1, "name": "Ravi", "image": "http://localhost:8000/media/uploads/images/new1.png", "category": "MLA", "zipcode": 638103, "age": 27, "email": "[email protected]", "contact_number": 4294264242, "party": 2, "state": 4, "district": 6, "constituency": 9 } ], "state": "Karanataka", "state_id": 4, "district": "Dharwad", "district_id": 6, "constituency": "Kalghatgi" }, { "id": 10, "mla": [], "state": "Tamil Nadu", "state_id": 5, "district": "Tripur", "district_id": 7, "constituency": "tripur1" }, { "id": 11, "mla": [], "state": "Tamil Nadu", "state_id": 5, "district": "Tripur", "district_id": 7, "constituency": "tripur2" }, { "id": 12, "mla": [], "state": "Maharastra", "state_id": 6, "district": "Karad", "district_id": 10, "constituency": "karad1" }, { "id": 13, "mla": [ { "id": 17, "votes": 2, "name": "Sashikala Jolle", "image": "http://localhost:8000/media/uploads/images/2_Plb3dTO.png", "category": "MLA", "zipcode": 638103, "age": 50, "email": "[email protected]", "contact_number": 4294264242, "party": 1, "state": 4, "district": 5, "constituency": 13 }, { "id": 18, "votes": 0, "name": "MLA 23", "image": "http://localhost:8000/media/uploads/images/3.png", "category": "MLA", "zipcode": 638103, "age": 23, "email": "[email protected]", "contact_number": 4294264242, "party": 2, "state": 4, "district": 5, "constituency": 13 } ], "state": "Karanataka", "state_id": 4, "district": "Belgavi", "district_id": 5, "constituency": "Nippani" }, { "id": 14, "mla": [], "state": "Karanataka", "state_id": 4, "district": "Belgavi", "district_id": 5, "constituency": "Gokak" }, { "id": 15, "mla": [], "state": "Karanataka", "state_id": 4, "district": "Belgavi", "district_id": 5, "constituency": "Bailhongal" }, { "id": 16, "mla": [], "state": "Karanataka", "state_id": 4, "district": "Belgavi", "district_id": 5, "constituency": "Kudachi" }, { "id": 17, "mla": [], "state": "Karanataka", "state_id": 4, "district": "Belgavi", "district_id": 5, "constituency": "Raybag" }, { "id": 18, "mla": [], "state": "Karanataka", "state_id": 4, "district": "Dharwad", "district_id": 6, "constituency": "Kundgol" }, { "id": 19, "mla": [], "state": "Karanataka", "state_id": 4, "district": "Dharwad", "district_id": 6, "constituency": "Navalgund" }, { "id": 20, "mla": [], "state": "Karanataka", "state_id": 4, "district": "Bangalore", "district_id": 11, "constituency": "Bangalore-east" }, { "id": 21, "mla": [], "state": "Karanataka", "state_id": 4, "district": "Bangalore", "district_id": 11, "constituency": "Bangalore-west" }, { "id": 22, "mla": [], "state": "Karanataka", "state_id": 4, "district": "Bangalore", "district_id": 11, "constituency": "Bangalore-south" } ]

CodePudding user response：

Use the following code

var mlas = []; // WHICH STORES LIST OF MLAS WITH HIGHEST VOTED

// PICKING MLA DATA FROM THE JSON
jsonData.forEach(e => {
  mlas = mlas.concat(e.mla);
});

//SORTING ON VOTES
var sorted = mlas.sort((a,b) => b.votes - a.votes);

CodePudding user response：

You could map, filter, flatten and sort the data to get the result set you need and then use JavaScript to create the list. Working solution below.

<html>
<body>
    <div>
        <ul id="mla-list">
        </ul>
    <div>
    <script>
        const data = [{ "id": 6, "mla": [{ "id": 16, "votes": 1, "name": "Shrimant", "image": "http://localhost:8000/media/uploads/images/assignment_image.png", "category": "MLA", "zipcode": 591320, "age": 49, "email": "[email protected]", "contact_number": 58966663144, "party": 1, "state": 4, "district": 5, "constituency": 6 }, { "id": 19, "votes": 3, "name": "Shetal Patil", "image": "http://localhost:8000/media/uploads/images/7_oHBWq6E.png", "category": "MLA", "zipcode": 591320, "age": 35, "email": "[email protected]", "contact_number": 8523697410, "party": 2, "state": 4, "district": 5, "constituency": 6 }, { "id": 20, "votes": 2, "name": "Raju Kage", "image": "http://localhost:8000/media/uploads/images/new1_MIaR3xQ.png", "category": "MLA", "zipcode": 591320, "age": 50, "email": "[email protected]", "contact_number": 8963257410, "party": 3, "state": 4, "district": 5, "constituency": 6 }], "state": "Karanataka", "state_id": 4, "district": "Belgavi", "district_id": 5, "constituency": "Kagwad" }, { "id": 7, "mla": [{ "id": 9, "votes": 1, "name": "Chandra Metal Mart", "image": "http://localhost:8000/media/uploads/images/2.png", "category": "MLA", "zipcode": 638103, "age": 23, "email": "[email protected]", "contact_number": 4294264242, "party": 1, "state": 4, "district": 5, "constituency": 7 }, { "id": 10, "votes": 3, "name": "Vaibhav", "image": "http://localhost:8000/media/uploads/images/4.png", "category": "MLA", "zipcode": 638103, "age": 34, "email": "[email protected]", "contact_number": 4294264242, "party": 2, "state": 4, "district": 5, "constituency": 7 }, { "id": 12, "votes": 2, "name": "MLA 1", "image": "http://localhost:8000/media/uploads/images/7.png", "category": "MLA", "zipcode": 638103, "age": 23, "email": "[email protected]", "contact_number": 4294264242, "party": 3, "state": 4, "district": 5, "constituency": 7 }, { "id": 21, "votes": 1, "name": "Gajanan", "image": "http://localhost:8000/media/uploads/images/WhatsApp_Image_2020-11-04_at_7.56.56_PM.jpeg", "category": "MLA", "zipcode": 638103, "age": 45, "email": "[email protected]", "contact_number": 4294264242, "party": 5, "state": 4, "district": 5, "constituency": 7 }, { "id": 22, "votes": 1, "name": "Pranav Singh", "image": "http://localhost:8000/media/uploads/images/WhatsApp_Image_2020-11-04_at_7.56.56_PM_W9hWtbF.jpeg", "category": "MLA", "zipcode": 638103, "age": 25, "email": "[email protected]", "contact_number": 4294264242, "party": 6, "state": 4, "district": 5, "constituency": 7 }], "state": "Karanataka", "state_id": 4, "district": "Belgavi", "district_id": 5, "constituency": "Chikodi" }, { "id": 8, "mla": [], "state": "Karanataka", "state_id": 4, "district": "Dharwad", "district_id": 6, "constituency": "Navlgund" }, { "id": 9, "mla": [{ "id": 11, "votes": 3, "name": "Shetter", "image": "http://localhost:8000/media/uploads/images/images_2.jpg", "category": "MLA", "zipcode": 638103, "age": 23, "email": "[email protected]", "contact_number": 4294264242, "party": 1, "state": 4, "district": 6, "constituency": 9 }, { "id": 14, "votes": 0, "name": "Ramulu", "image": "http://localhost:8000/media/uploads/images/2_mK5SuIZ.png", "category": "MLA", "zipcode": 638103, "age": 27, "email": "[email protected]", "contact_number": 4294264242, "party": 3, "state": 4, "district": 6, "constituency": 9 }, { "id": 15, "votes": 1, "name": "Ravi", "image": "http://localhost:8000/media/uploads/images/new1.png", "category": "MLA", "zipcode": 638103, "age": 27, "email": "[email protected]", "contact_number": 4294264242, "party": 2, "state": 4, "district": 6, "constituency": 9 }], "state": "Karanataka", "state_id": 4, "district": "Dharwad", "district_id": 6, "constituency": "Kalghatgi" }, { "id": 10, "mla": [], "state": "Tamil Nadu", "state_id": 5, "district": "Tripur", "district_id": 7, "constituency": "tripur1" }, { "id": 11, "mla": [], "state": "Tamil Nadu", "state_id": 5, "district": "Tripur", "district_id": 7, "constituency": "tripur2" }, { "id": 12, "mla": [], "state": "Maharastra", "state_id": 6, "district": "Karad", "district_id": 10, "constituency": "karad1" }, { "id": 13, "mla": [{ "id": 17, "votes": 2, "name": "Sashikala Jolle", "image": "http://localhost:8000/media/uploads/images/2_Plb3dTO.png", "category": "MLA", "zipcode": 638103, "age": 50, "email": "[email protected]", "contact_number": 4294264242, "party": 1, "state": 4, "district": 5, "constituency": 13 }, { "id": 18, "votes": 0, "name": "MLA 23", "image": "http://localhost:8000/media/uploads/images/3.png", "category": "MLA", "zipcode": 638103, "age": 23, "email": "[email protected]", "contact_number": 4294264242, "party": 2, "state": 4, "district": 5, "constituency": 13 }], "state": "Karanataka", "state_id": 4, "district": "Belgavi", "district_id": 5, "constituency": "Nippani" }, { "id": 14, "mla": [], "state": "Karanataka", "state_id": 4, "district": "Belgavi", "district_id": 5, "constituency": "Gokak" }, { "id": 15, "mla": [], "state": "Karanataka", "state_id": 4, "district": "Belgavi", "district_id": 5, "constituency": "Bailhongal" }, { "id": 16, "mla": [], "state": "Karanataka", "state_id": 4, "district": "Belgavi", "district_id": 5, "constituency": "Kudachi" }, { "id": 17, "mla": [], "state": "Karanataka", "state_id": 4, "district": "Belgavi", "district_id": 5, "constituency": "Raybag" }, { "id": 18, "mla": [], "state": "Karanataka", "state_id": 4, "district": "Dharwad", "district_id": 6, "constituency": "Kundgol" }, { "id": 19, "mla": [], "state": "Karanataka", "state_id": 4, "district": "Dharwad", "district_id": 6, "constituency": "Navalgund" }, { "id": 20, "mla": [], "state": "Karanataka", "state_id": 4, "district": "Bangalore", "district_id": 11, "constituency": "Bangalore-east" }, { "id": 21, "mla": [], "state": "Karanataka", "state_id": 4, "district": "Bangalore", "district_id": 11, "constituency": "Bangalore-west" }, { "id": 22, "mla": [], "state": "Karanataka", "state_id": 4, "district": "Bangalore", "district_id": 11, "constituency": "Bangalore-south" }];

        const mlaNames = data.map(d => d.mla)
                    .filter(mla => mla.length > 0)
                    .flat()
                    .sort((mla1, mla2) => mla2.votes - mla1.votes)
                    .map(mla => mla.name);
        const list = document.getElementById("mla-list");
        mlaNames.forEach(mlaName => {
            const li = document.createElement("li");
            li.innerText = mlaName;
            list.appendChild(li);
        });
    </script>
</body>