如何将对象转换为HTML项目符号列表

How to convert object into HTML bullet list?

本文关键字：HTML 项目 符号 列表 转换 对象      更新时间：2023-09-26

我有一个通过JSON AJAX请求检索的对象，它看起来像这样：

{
    "success":false,
    "errors": {
        "name":"Name you entered is not valid!",
        "emailError":"The email address you entered is not valid"
    } 
}

现在我需要将中的errors属性转换为HTML列表。这就是我在这个阶段使用这些错误的方式：

if (!data.success) { // If fails
    if (data.errors.emailError) { 
        $('#messages').fadeIn(1000).append('<div class="response-output">' + data.errors.emailError + '</div>');
    }
}

更新：我的服务器端代码如下：

$errors = array(); //To store errors
$form_data = array(); //Pass back the data to `form.php`
if(isset($_POST['your_name'], $_POST['your_email'], $_POST['your_message'])) {
    // Sanitize and validate the data passed in     
    if (preg_match ('/^[A-Z ''.-]{2,60}$/i', $_POST['your_name'])) {
        $name = filter_input(INPUT_POST, 'your_name', FILTER_SANITIZE_STRING);
    } else {
        $errors['name'] = 'Name you entered is not valid!';
    }
    $email = filter_input(INPUT_POST, 'your_email', FILTER_SANITIZE_EMAIL);
    $email = filter_var($email, FILTER_VALIDATE_EMAIL);  
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        // Not a valid email
        $errors['emailError'] = 'The email address you entered is not valid';
    }
    // if form fields ok 
    if (empty($errors)) { 
            // --- my mail 
            $mail_sent = mail($sendTo, $subject , $emailbody, implode("'r'n", $headers));
            if ($mail_sent == true){ 
                // Success massege
                $form_data['success'] = true;
                $form_data['posted'] = 'Your requirement have been sent. We will get back to you soon.';    
            }   
    } else {
        $form_data['success'] = false;
    $form_data['errors']  = $errors;
    }
    //Return the data back to form.php
    echo json_encode($form_data);
}

但我想在我的#messages分区中创建HTML列表。希望有人能帮我。

当success为false时，您可以使用for循环来迭代errors对象的属性，并从中创建所需的ul和li元素：

if (!json.success) {
    var $ul = $('<ul />').appendTo('#messages');
    for (var key in json.errors) {
        $('<li />', {
            text: key + ': ' + json.errors[key]
        }).appendTo($ul);
    }
}

小提琴示例

请注意，可以通过使errors属性包含数组而不是对象来改进响应。如何实现这一点取决于从AJAX请求生成响应的方式。

相关文章：