根据特定的学生证显示图片

时间：2018-12-01 20:28:37

标签： javascript mysql

因此从我的sql表中获取所有信息后，我将它们放入2个变量中，分别称为response1和response2。下面显示的是数组中当前的内容。我的目标是在每个学生旁边展示这些图片。如果图片不存在，则目前只能是空白。因此，我已经通过使用base64编码从数据库获取了图片，但我目前仅针对id：20000001进行处理，因为我不确定如何针对其他图片进行处理。

我有个替换的想法

student_image= findItemByID(response2,'20000001');

使用

student_image= findItemByID(response2,element.id);吗？
 但不确定这是否是正确的逻辑吗？

在我的Object.keys最终循环中，我应该如何修复html+='<img src="data:image/jpeg;base64,'+student_image.photo+'">'以便添加特定ID的图像？

Response1对象数组：

0: {Class_Student_Group: 1, names: "Lastname1, Firstname1", id: 20000001}
1: {Class_Student_Group: 2, names: "Lastname2, Firstname2", id: 20000002}
2: {Class_Student_Group: 3, names: "Lastname3, Firstname3", id: 20000003}
3: {Class_Student_Group: 5, names: "Lastname4, Firstname4", id: 20000004}
4: {Class_Student_Group: 3, names: "Lastname5, Firstname5", id: 20000005}

Response2对象数组：

0: {student_id: "20000001", photo: ""}
1: {student_id: "20000001", photo: "/9j/4AAQSkZJRgABAQAAAQABAAD/4QB6RXhpZgAASUkqAAgAAA…9a1EtFKAnd09f/rVlwfdFbVw7LPIoOAGNYwjc/SIaxR//2Q=="}
2: {student_id: "20000002", photo: ""}
3: {student_id: "20000003", photo: ""}

最终：

1: Array(4)
0: {Class_Student_Group: 1, names: "Lastname1, Firstname1", id: 20000001}
1: {Class_Student_Group: 1, names: "Lastname9, Firstname9", id: 20000009}
2: {Class_Student_Group: 1, names: "Lastname15, Firstname15", id: 20000015}
3: {Class_Student_Group: 1, names: "Lastname19, Firstname19", id: 20000019}
length: 4
__proto__: Array(0)
2: (4) [{…}, {…}, {…}, {…}]
3: (4) [{…}, {…}, {…}, {…}]

到目前为止的输出：

enter image description here 

<script type="text/javascript">





$(document).ready(function() {



var response= <?php echo json_encode($table); ?>;
var response2= <?php echo json_encode($result); ?>;





function findItemByID(arr, id) {
  return arr.find((photoObj) => {
    return photoObj.photo.trim().length !== 0 && photoObj.student_id === id
  })
}


var final = {}

response.forEach(function(element) {
  final[element.Class_Student_Group] = final[element.Class_Student_Group] || [];
  final[element.Class_Student_Group].push(element);

});




let student_image =''


Object.keys(final).forEach(function(Group) {

      let html = '';

      //add the table opening tag to the html variable
      html += '<table>';
      //Append the 'category' header
      html += '<tr>';
      html += '<td><h1>'+"Group"+ Group+'</h1></td>';
      html += '</tr>';

      // Loop through the results for this 'category'
      student_image= findItemByID(response2,'20000001');
      final[Group].forEach(function(element) {   
      var randomImage = images[Math.floor(Math.random() * images.length)];
        var names = element.names;
        var id=element.id;

        var img = "<img src=' " + randomImage+ " ' />";
        html += '<tr>';
        html += '<td><p>' + names + '</p></td> ';
        html += '<td><p>' + id + '</p></td> ';
        html+='<img src="data:image/jpeg;base64,'+student_image.photo+'">'


        html += '</tr>';
      });
      //add the table closing tag to the html variable
      html += '</table>'; 

      $('#tables_container').append(html);
});








});

</script>

2 个答案:

答案 0 :(得分：2)

好。这里发生了很多事情。

  1. 基本上，findItemByID()函数不起作用的原因是因为 A。（我必须假设您知道这一点）您每次都传递相同的ID它被称为 B 。将其放在调用final[Group].forEach(function(element)之前，就无法为id传递正确的值，因为id是该{的属性{1}}变量和 C。 element是严格的相等运算符，这意味着如果值和=== >它们是同一类型。在一个对象数组中，值是一个字符串，在另一个对象中是一个数字。
  2. 您正在做很多杂乱的事情。退后一步，尝试考虑一下此代码的用途，并一次编写一个步骤，并在可行的情况下（如我在此处所做的那样）将您的步骤分解为功能。查看我对您的代码所做的更改以及我添加的注释。通常，在编写代码时，您希望使用函数使事物更具可读性，并将其分解，以便在任何给定时间以最小的复杂度进行处理。表格的作用类似于 表格->行->列 -用这种方式编写代码。
  3. 对于将Base64用于HTML图像，我一无所知，但查看this link则表明您在此处提供的数据无效。在接受的答案中查看decoder。
  4. 我更改了您遍历true对象的方式。这可能主要是口味问题，但对我来说更具可读性。您可以详细了解here
  5. 使用更好的名字！如果您也不想记住final与response中的数据，那么当您想弄清楚为什么损坏某个东西时，要容易得多。只需称它们为response2和studentDataArray之类的东西即可。

imageDataArray
$(document).ready(function () {
    loadTable();
});

let array1 = [
    { Class_Student_Group: 1, names: "Lastname1, Firstname1", id: 20000001 }
    , { Class_Student_Group: 2, names: "Lastname2, Firstname2", id: 20000002 }
    , { Class_Student_Group: 3, names: "Lastname3, Firstname3", id: 20000003 }
    , { Class_Student_Group: 5, names: "Lastname4, Firstname4", id: 20000004 }
    , { Class_Student_Group: 3, names: "Lastname5, Firstname5", id: 20000005 }
]

let array2 = [{ student_id: "20000001", photo: "" }
    , { student_id: "20000001", photo: "/9j/4AAQSkZJRgABAQAAAQABAAD/4QB6RXhpZgAASUkqAAgAAA…9a1EtFKAnd09f/rVlwfdFbVw7LPIoOAGNYwjc/SIaxR//2Q==" }
    , { student_id: "20000002", photo: "" }
    , { student_id: "20000003", photo: "" }];

function findItemByID(arr, id) {
    return arr.find((photoObj) => {
        return photoObj.photo.trim().length !== 0 && photoObj.student_id == id // because the id property in the student object is a number and in the photo array it's a string, change this to '==', which evaluates '2' as equal to 2. === only returns true if they are the same type
        //also you have been checking for a student_id property here, which doesn't exist on the second array's objects, so this wasn't returning anything
    })
}

function getFinalObject(response) {
    var final = {}

    response.forEach(function (element) {
        final[element.Class_Student_Group] = final[element.Class_Student_Group] || [];
        final[element.Class_Student_Group].push(element);

    });

    return final;

}

function appendHtmlToDoc(final, response2, images) {

    let html = '';

    //add the table opening tag to the html variable
    html += '<table>';

    for (let Group in final) {               //this will loop through final's properties, in this case, the 'groups'
        if (final.hasOwnProperty(Group)) {    //use hasOwnProperty to make sure you aren't looping through irrevelant properties (https://stackoverflow.com/questions/8312459/iterate-through-object-properties)

            //Append the 'category' header
            html += '<tr>';
            html += '<td><h1>' + "Group" + Group + '</h1></td>';
            html += '</tr>';

            // Loop through the results for this 'category'
            final[Group].forEach(function (element) { //you already have the Group array in the Group variable

                let student_image = findItemByID(response2, element.id);    //search for the image data using this element's id property

                // var randomImage = images[Math.floor(Math.random() * images.length)]; //should pass 'images' into this function, but I don't know where it came from and randomImage/img isn't used in the code you provided, so I removed it
                var names = element.names;
                var id = element.id;

                // var img = "<img src=' " + randomImage + " ' />";
                html += '<tr>';
                html += '<td><p>' + names + '</p></td> ';
                html += '<td><p>' + id + '</p>';
                if (student_image) { //check if something was returned when you searched for the photo, otherwise you'll have a blank image here
                    html += '<td><img src="data:image/jpeg;base64, ' + student_image.photo + '"></td>'; //I don't know anything about using images in HTML with base64, but a look at this link (https://stackoverflow.com/questions/8499633/how-to-display-base64-images-in-html) suggests that what you have provided won't work
                }
                //I also added a td around your img tag

                html += '</tr>';
            });
        }
    }

    //add the table closing tag to the html variable
    html += '</table>';
    //console.log(html)
    $('#tables_container').append(html);

}

function loadTable() {

    //move your php script calls here

    let finalObj = getFinalObject(array1);
    appendHtmlToDoc(finalObj, array2);
}

答案 1 :(得分：0)

尝试：

if(!photo.id) {
   // There's no image
} else {
   // There's an image
}
相关问题
最新问题