How to make a json_encode returned object into a javascript variable

Question

I am returning a json_encode object to an ajax call. First off, is there a better way to do this? Is this json_encode needed?

To the root of my question. When I try to get to make the key a variable, it throws a "not defined error". This line: var displayTriggers = trigger_rows;

Does anyone see what I'm doing wrong?

PHP:

try {
    $con = getConfig('pdo');
    $con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $sql_triggers = "
        SELECT *
        FROM triggers
    ";
    $triggers_stmt = $con->prepare($sql_triggers);
    $triggers_stmt->execute();
    $triggers_rows = $triggers_stmt->fetchAll(PDO::FETCH_ASSOC);
    $triggers_arr = array();
    foreach ($triggers_rows as $triggers_row) {
        $trigger_id = $triggers_row['id'];
        $trigger_title = $triggers_row['trigger_name'];
        $trigger_setting = $triggers_row['setting'];
        $trigger_user = $triggers_row['user_id'];
        $trigger_placement = $triggers_row['placement'];
        $trigger_date = $triggers_row['date_changed'];
        $trigger_active = ( $trigger_setting == '1' ) ? ' active' : '';
        $html = '';
        $html .= '<div class="triggerRow" data-placement="'.$trigger_placement.'">';
        $html .= '<div class="triggerRowLeft">';
        $html .= '<div class="triggerTitle">' . $trigger_title . '</div>';
        $html .= '<div class="triggerText">' . $trigger_date . '</div>';
        $html .= '<div class="triggerText">' . $trigger_user . '</div>';
        $html .= '</div>';
        $html .= '<div class="triggerRowRight">';
        $html .= '<div class="triggerButton' . $trigger_active . '"></div>';
        $html .= '</div>';
        $html .= '</div>';
        $data = array('html' => $html);
        $triggers_arr[] = $data;
    }
    echo json_encode(['trigger_rows' => $triggers_arr]);
}
catch(PDOException $e) {
    echo "Connection failed: " . $e->getMessage();
}

JS:

$wrapper = $('#triggerCont');
$.ajax({
    url: 'php/triggerSelect.php',
    dataType: 'json',
    success: function (data) {
      //console.log(data);
        if (data == null) {
            alert("Unable to retrieve triggers!");
            alert(data);
        } else {
            var displayTriggers = trigger_rows;
            $wrapper.empty();
            $(displayTriggers).each(function() {
                $wrapper.append(this.html);
                //console.log(this.html);
            });
        }
    },
    error: function (xhr, textStatus, errorThrown) {
        alert(textStatus + " | " + errorThrown);
        alert('There are currently no project images for this selection');
    }
});

Answer 1

var displayTriggers = data.trigger_rows;

should do the trick