How to manipulate each item in json array to go to a specific element class, href, id, text..etc?

Question

Basically, I am clicking a div, then adding the data from my SQL database to its respective spots. I am trying to go through each item in the array and manipulate them as I desire. Say I want to add task_date: "2020-03-01 21:44:55" to an href. and add title: "asdfasdf" to a divs class (the result in quotes of course). It may sound dumb, but I just need to know so I can do it myself in any way i choose. I know this can all be done with Jquery, but how do I go through each result to manipulate it individually? do I need JSON.parse(response); ? Or change my PHP echo result?
AJAX CALL

   $(function(){
      $(".task-listing").click(function() {
           $.ajax({
            type: 'POST',
            url: '/task-info-get.php',
            dataType: 'json',
            data: 'info=' + $(this).attr("id"),
            success: function (response) {
            //what i want:
            $(".link").attr("href", response[0]);
            $(".price").attr('class', response[1]);
        }
         })
       });
    });

PHP File

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

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

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

Success Response in Console

task_date: "2020-03-01 21:44:55"
title: "asdfasdf"
description: "asdfasdf"
location: "Local"
price: 3333
startdate: "2020-03-18"
tasktime: "00:00:00"

Answer 1

It is important to note what your $output variable type is. You treat it as an array and when inside your while loop you are adding an array as an array element to $output .

Your code:

$output[]=array(
    'task_date' => $task_date,
    'title' => $title,
    'description' => $description,
    'location' => $location,
    'price' => $price,
    'startdate' => $startdate,
    'tasktime' => $tasktime
);

what I assume your desire:

$output=array(
    'task_date' => $task_date,
    'title' => $title,
    'description' => $description,
    'location' => $location,
    'price' => $price,
    'startdate' => $startdate,
    'tasktime' => $tasktime
);

Two characters removed. [] .

Next, your Javascript. You are treating your response as an indexed array (accessed with numerical keys starting with 0) when instead it is an associate array (accessed with arbitrary keys).

Example would be you have:

 $(".price").attr('class', response[1]);

When the desired code should be:

 $(".price").attr('class', response['title']);

Without knowing your HTML structure I cannot give you specific code that will 100% work, but I hope this advice can at least put you in the right direction. If you supply your HTML structure as well then more help can be provided.

Off-topic: This is my first SO answer. I've received help from this site for many years so I figure it is about time I start giving back. If you have any etiquette suggestions or resources for me to read to improve my SO answer quality, please let me know. Thank you.