php - 循环 JSON 以显示未知数量的数据行？

Question

我有一个部分，用户可以在其中输入他们的教育经历。每次单击“添加教育” anchor 标记并创建三个输入集。 education_institution、education_outcome 和 education_date。所以每个用户可以有一个或一百个。

然后将其作为 JSON 数据保存在 MYSQL 中。我的问题是如何从数据库中获取它并循环(使用 PHP 或 javascript)JSON 并在 3 个输入行中显示每个集合，如下面的 HTML 所示？

非常感谢任何帮助。

HTML:

<p class="mt-3 text-left"> Education </p>

<div class="row block">

    <div class="col-md-3">
        <input type="text" name="education_institution[]" placeholder="Institution" value="<?php echo($decoded_data->education->education_institution); ?>">
    </div>

    <div class="col-md-3">
        <input type="text" name="education_outcome[]" placeholder="Outcome" value="<?php echo($decoded_data->education->education_outcome); ?>">
    </div>

    <div class="col-md-3">
        <input type="Date" name="education_date[]" placeholder="Date of completion" value="<?php echo($decoded_data->education->education_date); ?>">

    </div>
    <div class="col-md-3 text-center">
        <button href="#" class="able_btn m-0 w-100"> remove </button>
    </div>

</div>  

    <div class="text-center mt-3">
        <a class="add_education" href=""> Add education </a>    
    </div>

JQUERY:

$('.add_education').click(function(evt) {
 evt.preventDefault();

    $('.block:last').after('<div class="row block"><div class="col-md-3"><input type="text" name="education_institution[]" placeholder="Institution"></div><div class="col-md-3"><input type="text" name="education_outcome[]" placeholder="Outcome"></div><div class="col-md-3"><input type="Date" name="education_date[]" placeholder="Date of completion"></div><div class="col-md-3 text-center"><button class="able_btn m-0 w-100 remove"> remove </button></div></div>');
});

PHP:

$json_data = array(
        'profession' => $profession,
        'personal_statement' => $personal_statement,

    'education' => [
        'education_institution' => $education_institution,
        'education_outcome' => $education_outcome,
        'education_date' => $education_date],
    'employment' => [
        'job_title' => $job_title,
        'job_location' => $job_location,
        'job_duration' => $job_duration]);


$data = json_encode($json_data);

JSON:

{
    "profession": "",
    "personal_statement": "",
    "education": {
        "education_institution": [
            "school one",
            "school two"
        ],
        "education_outcome": [
            "out one",
            "out two"
        ],
        "education_date": [
            "2017-11-01",
            "2017-11-04"
        ]
    },
    "employment": {
        "job_title": [
            ""
        ],
        "job_location": [
            ""
        ],
        "job_duration": [
            ""
        ]
    }
}

Answer 1

因为您没有将三个字段值一起存储在单个 JSON 对象中，所以实际上不可能使用 foreach 循环。因此，我使用了 for 循环。

如果您在 UI 和数据库之间保持相同的结构，您可能会发现处理数据会容易得多。这可以使用特定索引来完成。我在最后提供了一个示例。

<?php

// Decode database to PHP array
$data = json_decode($json, true);

// Assumes `education`, `education_institution`, `education_outcome` and `education_date` indexes will always exist
// Count number of items in `education_institution` and assume `education_outcome` and `education_date` will have same count
$count = count($data['education']['education_institution']);

?>

<p class="mt-3 text-left"> Education </p>

<?php for ($i = 0; $i < $count; $i++): ?>
    <div class="row block">

        <div class="col-md-3">
            <input type="text" name="education_institution[]" placeholder="Institution" value="<?= $data->education->education_institution[$i] ?>">
        </div>

        <div class="col-md-3">
            <input type="text" name="education_outcome[]" placeholder="Outcome" value="<?= $data->education->education_outcome[$i] ?>">
        </div>

        <div class="col-md-3">
            <input type="Date" name="education_date[]" placeholder="Date of completion" value="<?= $data->education->education_date[$i] ?>">
        </div>

        <div class="col-md-3 text-center">
            <button href="#" class="able_btn m-0 w-100"> remove </button>
        </div>

    </div>  
<?php endfor ?>

<div class="text-center mt-3">
    <a class="add_education" href=""> Add education </a>    
</div>

使用索引维护数据结构的示例:

<div class="row block">

    <div class="col-md-3">
        <input type="text" name="education[0]['institution']" placeholder="Institution" value="<?= $data['education_institution'][$i] ?>">
    </div>

    <div class="col-md-3">
        <input type="text" name="education[0]['outcome']" placeholder="Outcome" value="<?= $data['education_outcome'][$i] ?>">
    </div>

    <div class="col-md-3">
        <input type="Date" name="education[0]['date']" placeholder="Date of completion" value="<?= $data['education_date'][$i] ?>">
    </div>

    <div class="col-md-3 text-center">
        <button href="#" class="able_btn m-0 w-100"> remove </button>
    </div>

</div>

<div class="row block">

    <div class="col-md-3">
        <input type="text" name="education[1]['institution']" placeholder="Institution" value="<?= $data['education_institution'][$i] ?>">
    </div>

    <div class="col-md-3">
        <input type="text" name="education[1]['outcome']" placeholder="Outcome" value="<?= $data['education_outcome'][$i] ?>">
    </div>

    <div class="col-md-3">
        <input type="Date" name="education[1]['date']" placeholder="Date of completion" value="<?= $data['education_date'][$i] ?>">
    </div>

    <div class="col-md-3 text-center">
        <button href="#" class="able_btn m-0 w-100"> remove </button>
    </div>

</div>

// ...

这是一个使用修改后的索引结构的示例。

<?php foreach ($data['education'] as $i => $row): ?>

    <div class="row block">

        <div class="col-md-3">
            <input type="text" name="education[<?= $i ?>]['institution']" placeholder="Institution" value="<?= $row['education_institution'] ?>">
        </div>

        <div class="col-md-3">
            <input type="text" name="education[<?= $i ?>]['outcome']" placeholder="Outcome" value="<?= $row['education_outcome'] ?>">
        </div>

        <div class="col-md-3">
            <input type="Date" name="education[<?= $i ?>]['date']" placeholder="Date of completion" value="<?= $row['education_date'] ?>">
        </div>

        <div class="col-md-3 text-center">
            <button href="#" class="able_btn m-0 w-100"> remove </button>
        </div>

    </div>

<?php endforeach ?>