Grouping same data from db in html using ajax jquery

Question

Given below in the picture is the desired output I want. I've 3 tables, student, projects and a junction table where corresponding student ids are present against each project id. I'm unable to group on the basis of projects, if there's any better solution for this, that'd be good. I want to show data through jquery, that's the most important thing here. Any help would be appreciated.

main.php file

$result = $con->query("
    SELECT s.Name, p.Title, p.Description FROM students s LEFT JOIN projects p ON s.Student_id = p.Project_id LEFT JOIN proj_stu_junc psg ON p.Project_id = psg.Student_id");
    //  var_dump($result);
     while($row=mysqli_fetch_assoc($result))
  {
  $image=$row ['Title'];
  
  echo $image;
  
  }
  mysqli_free_result($result);

JS file

$.ajax({
        type: "GET",
        url: 'main.php',
        dataType: 'text',
        success: getfive
    });
    
    function getfive(val) {
        var stuArray = val.split('\n');
        stuArray.forEach(function(studentName){
            $('#getfive').append('<div>'+studentName+'</div>') 
        });
    }

Each group of project should generate a separate div.

HTML placeholder

<div class="main-container">
        <div id="getfive"></div>
    </div>

Start by changing `echo $image;` to `echo json_encode($image);` OUTSIDE the loop and perhaps not use image and title if you want to show name — mplungjan, Sep 03 '21 at 12:08
Possible look at code like [this](https://stackoverflow.com/questions/383631/json-encode-mysql-results) — mplungjan, Sep 03 '21 at 12:09

score 0 · Answer 1 · answered Sep 03 '21 at 13:17

0

cant comment yet.. so ill try and give an answer instead.

first i suggest you formulate your SQL statements on your mysql db tool(phpmyadmin/workbench) rather than running it with php, it would be easier to debug should there be any need for it.

now for the ajax result do not limit the array to just titles. pass all the queried values as JSON.

then to display simply, identify the unique titles. loop on those titles and print out the students with the equal titles per div.

answered Sep 03 '21 at 13:17

How can I pick a group of students in the same project through mysql query above? I'm kinda new to this – Kenny.k Sep 03 '21 at 13:22
using sql? then add "where p.project_id = '[id of google,apple, etc]'" in the original sql you have. however if thats how you'll do it. for the main program, you will need to run multiple sql statements or ajax calls depending on where you loop. – Sep 03 '21 at 13:44
Is there any way to make it dynamic and not by not using static ids? – Kenny.k Sep 03 '21 at 14:02
as i suggested, pass all the queried data. not just the title. once you have transferred all data to JS. that's where and when you can dynamically sort them in individual divs as you want. use PHP to RUN SQL then pass "all" data to JS using AJAX. use JS to sort and display. so in short first learn to correctly output data from SQL. then learn to pass array data from php to js using ajax/json. finally, use js to display the data to the html. – Sep 03 '21 at 14:13

Grouping same data from db in html using ajax jquery

1 Answers1