Как разобрать массив AJAX в специфицированные c HTML div классы?

Question

В настоящее время у меня есть рабочий запрос AJAX, который отправляет запрос в мой файл PHP и выводит результат в HTML. Я могу создать предупреждение, которое показывает массив данных. Как мне разобрать данные и вставить каждый из них в классы div? Я знаю, что вы можете подумать «просто используйте таблицу или список». Мой настоящий код гораздо более структурирован, данные должны быть вставлены в указанные c divs.

Script

    $(function(){
        $(".task-listing").click(function() {
        $.ajax({
            type: 'POST',
            url: 'php/task-info-get.php',
            dataType: 'json',
            data: 'pid=' + $(this).attr("id"),
            success: function (response) {
                 alert(response);
            }
        })
    });
    });

HTML div Я хочу данные в

<div class="data">
  <div class="task_date"></div>
  <div class="title"></div>
  <div class="description"></div>
  <div class="location"></div>
  <div class="startdate"></div>
  <div class="tasktime"></div>
  <div class="price"></div>
</div>

PHP

<?php
include 'sqlconnection.php';
$conn = OpenCon();

$stmt = $conn->prepare('SELECT task_date,title,description,location,price,startdate,tasktime FROM tasks WHERE pid='.$_POST['pid']);
$stmt->execute();
$stmt->bind_result($task_date,$title,$description,$location,$price,$startdate,$tasktime);
while($stmt->fetch()) {
    $output[]=array($task_date,$title,$description,$location,$price,$startdate,$tasktime);
}
$json=json_encode($output);

echo $json;
$stmt->close();
CloseCon($conn);
?>

Answer 1

Можете ли вы поделиться своим ответом, если это возможно?

Это единственный объект?

если один объект, то нехорошо предполагать и перебирать все значения al oop, чтобы получить c значение ключа на основе индекса массива , например. Task_date находится в 2 позициях в массиве.

сначала проанализируйте ваш ajax ответ, например. var jsonres = JSON .parse (результат); добавьте ваше значение с помощью jquery selecter $ (". task_date"). html (data);

Answer 2

Вы можете использовать вот так:

  $(function(){
        $(".task-listing").click(function() {
            $.ajax({
                type: 'POST',
                url: 'php/task-info-get.php',
                dataType: 'json',
                data: 'pid=' + $(this).attr("id"),
                success: function (response) {
                    var jsonres=JSON.parse(result);
                    htmlconts='';
                    for (i in jsonres) {
                        htmlconts+='<div class="data">\
                            <div class="task_date">'+jsonres[i][0]+'</div>\
                            <div class="title">'+jsonres[i][1]+'</div>\
                            <div class="description">'+jsonres[i][2]+'</div>\
                            <div class="location">'+jsonres[i][3]+'</div>\
                            <div class="startdate">'+jsonres[i][4]+'</div>\
                            <div class="tasktime">'+jsonres[i][5]+'</div>\
                            <div class="price">'+jsonres[i][6]+'</div>\
                        </div>';
                    }
                    $("body").append(htmlconts);
                }
            });
        });
    }); 

Я добавил конечное содержимое в тег body. Вы можете использовать родителя class='data'.

Answer 3

Я бы изменил ваш PHP, чтобы он возвращал ассоциативный массив, с ключами, являющимися классом соответствующего div, для которого вы хотите, чтобы данные go превратились в:

while($stmt->fetch()) {
    $output[]=array(
        'task_date' => $task_date,
        'title' => $title,
        'description' => $description,
        'location' => $location,
        'price' => $price,
        'startdate' => $startdate,
        'tasktime' => $tasktime
    );
}

Затем в вашем JS Вы можете просто использовать клавиши ответа для заполнения div:

success: function (response) {
    Object.keys(response[0]).map(k => $('.' + k).text(response[0][k]));
}

Вот фрагмент кода, демонстрирующий код (с использованием обычной, а не стрелочной функции):

let response = [{
  task_date: "2020-02-26 17:56:15",
  title: "cccccccccccccc",
  description: "cccccccccccccc",
  location: "Remote",
  price: 44,
  startdate: "2020-02-14",
  tasktime: "00:03:33"
}]

Object.keys(response[0]).map(function(k) {
  $('.' + k).text(response[0][k]);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="data">
  <div class="task_date"></div>
  <div class="title"></div>
  <div class="description"></div>
  <div class="location"></div>
  <div class="startdate"></div>
  <div class="tasktime"></div>
  <div class="price"></div>
</div>

Answer 4

Если ответ всегда является массивом с достаточно полным содержимым (длина = 7) и в порядке дочерних элементов в теге div.data, вы можете просто сделать это с помощью Jquery:

const responses = [1, 2, 3, 4, 5, 6, 7];
$('.data').children().each((index, child) => {
    $(child).text(responses[index])
});

Например : https://jsbin.com/cikacohalu/edit?html, js, вывод

Для более сложной структуры html используйте прямой селектор для установки их содержимого:

$('.data .task_date').text(response[0]);
$('.data .title').text(response[1]);
$('.data .description').text(response[2]);
$('.data .location').text(response[3]);
$('.data .startdate').text(response[4]);
$('.data .tasktime').text(response[5]);
$('.data .price').text(response[6]);

Я бы порекомендовал ответ @ Ника, что у вас есть точное имя ключа для каждого поля от PHP бэкэнда до клиента.