Visualforce页面JS获取Apex Student列表显示undefined的问题排查及解决

你的代码存在的错误 #

1. Apex类命名非法 #

类名get studentlist包含空格，不符合Apex类命名规则，类名必须是合法标识符（无空格、首字母大写，通常采用大驼峰命名）。

2. 控制器成员变量未正确初始化 #

构造函数中重新声明了局部变量students，覆盖了类的成员变量students，且局部变量未初始化就调用add()方法，会触发空指针异常，最终导致类成员变量students始终为null，页面自然无法获取数据。

3. 数据传递格式错误 #

• Visualforce中直接输出{!request}，得到的是Apex对象的toString()结果（类似Student__c:{Id=001xxx, Name=张三}），不是JS可识别的JSON格式。
• console.log('requests', {!students});直接输出Apex列表，会被渲染成逗号分隔的字符串，无法被JS解析为数组。

正确实现方法 #

方法一：直接序列化Apex列表为JSON（推荐） #

这种方式更简洁高效，无需循环拼接：

Apex控制器

public with sharing class StudentListController {
    public String studentsJson { get; set; }

    public StudentListController() {
        List<Student__c> studentList = [SELECT Id, Name FROM Student__c];
        // 将Apex列表序列化为JSON字符串
        studentsJson = JSON.serialize(studentList);
    }
}

Visualforce页面

<apex:page controller="StudentListController">
    <script>
        // 将JSON字符串解析为JS数组
        const students = JSON.parse('{!JSENCODE(studentsJson)}');
        
        window.onload = function() {
            console.log('学生列表:', students);
            if(students.length > 0) {
                alert('第一个学生名称: ' + students[0].Name);
            }
        };
    </script>
</apex:page>

注意：使用JSENCODE()对JSON字符串进行转义，避免特殊字符导致JS语法错误。

方法二：修正原有循环拼接逻辑 #

如果你想保留原有循环方式，需要修复控制器和页面的问题：

Apex控制器

public with sharing class StudentListController {
    public List<Student__c> students { get; set; }

    public StudentListController() {
        // 直接初始化成员变量，无需局部变量
        students = [SELECT Id, Name FROM Student__c];
        // 原来的循环完全多余，SOQL查询结果直接赋值即可
        // 如果你需要额外处理数据，可以遍历students列表
    }
}

Visualforce页面

<apex:page controller="StudentListController">
    <script>
        const requests = [];
    </script>

    <apex:repeat value="{!students}" var="stu">
        <script>
            // 序列化单个对象为JSON，再转成JS对象
            const student = JSON.parse('{!JSENCODE(JSON.serialize(stu))}');
            requests.push(student);
        </script>
    </apex:repeat>

    <script>
        window.onload = function() {
            console.log('requests列表:', requests);
            if(requests.length > 0) {
                alert('第一个学生ID: ' + requests[0].Id);
            }
        };
    </script>
</apex:page>

内容的提问来源于stack exchange，提问作者Mohsin Shaikh