Показывать результаты JSON аккуратно на веб-странице

Question

Я пытаюсь выяснить, как получить результаты JSON и показать их в шаблоне, который я построил.

У меня есть страница с флажками, когда флажки установлены, сценарий уточняет поиск.До сих пор я создал скрипт, который проверяет, установил ли пользователь флажок.Затем отдельный PHP-скрипт выполняет запрос к базе данных SQL, возвращая результаты в реальном времени.

До сих пор мне удавалось получить это, чтобы возвращать результаты в виде JSON в консоли и «stringified» на веб-странице.

Как мне взять результаты JSON и аккуратно показать их настраница интернета?т.е.

Name: 'name', Locale: 'locale'
Name: 'name', Locale: 'locale'
Name: 'name', Locale: 'locale'

Это мой Ajax-код на данный момент:

var ajaxResult=[];
function updateEmployees(opts){
$.ajax({
type: "POST",
url: "search.php",
dataType : 'json',
cache: false,
data: {filterOpts: opts},
success:function(data)      {
        ajaxResult.push(data);
     }
});
}

Это код флажка javascript:

var $checkboxes = $("input:checkbox");
$checkboxes.on("change", function(){
var opts = getEmployeeFilterOptions();
updateEmployees(opts);

console.log(ajaxResult)
var myJSON = JSON.stringify(ajaxResult);
document.getElementById("demo").innerHTML = myJSON;

});
updateEmployees();

Спасибо за вашу помощь заранее,Я потратил пару дней, пытаясь понять это!

РЕДАКТИРОВАТЬ - PHP скрипт, который я использую

<?php
$pdo = new PDO('mysql:host=localhost;dbname=myDB', '**', '**');
$select = 'SELECT name, locale, website';
$from = ' FROM theList';
$where = ' WHERE TRUE';
$opts = isset($_POST['filterOpts'])? $_POST['filterOpts'] : array('');
if (in_array("pub", $opts)){
$where .= " AND pub = 1";
}
if (in_array("bar", $opts)){
$where .= " AND bar = 1";
}
if (in_array("restaurant", $opts)){
$where .= " AND restaurant = 1";
}
if (in_array("club", $opts)){
$where .= " AND club = 1";
}
if (in_array("locale-a", $opts)){
$where .= " AND locale = 'south'";
}
if (in_array("locale-b", $opts)){
$where .= " AND locale = 'west'";
}

$sql = $select . $from . $where;
$statement = $pdo->prepare($sql);
$statement->execute();
$results = $statement->fetchAll(PDO::FETCH_ASSOC);
$json = json_encode($results);
echo($json);
?>

Answer 1

Здесь происходит несколько вещей.

1. Ваш набор результатов будет расти каждый раз, когда меняется флажок, так как вы добавляете новый элемент в массив результатов.Если вы извлекаете полный набор данных каждый раз, это не нужно.

2. AJAX работает асинхронно, ваш код написан с ожиданием того, что он синхронный.

Это...

console.log(ajaxResult)
var myJSON = JSON.stringify(ajaxResult);
document.getElementById("demo").innerHTML = myJSON;

});
updateEmployees();

... ожидает данные, которые еще не существуют.

Процесс идет:

1. * пользователь нажимает флажок *

2. отправлять выборки на сервер для запроса базы данных

3. ждать ответа

4. обрабатывать результат при получении ответа

Однако приведенный выше код уже находится на шаге 4 до его завершения.Вы должны указать ajax-вызову, что делать, когда он получил ответ:

// send selections to server
function updateEmployees(){
    $.ajax({
        type: "POST",
        url: "search.php",
        dataType : 'json',
        cache: false,
         // serialize checked boxes to a query string like "check1=on&check2=on"
        data: $('input:checkbox').serialize(),
        success: handleResults
    });
}

// handle filtered results
function handleResults(data) {
    // same as document.getElementById('demo').innerHTML
    $('#demo').html(
        JSON.stringify(data)
    );
}

// add events to checkboxes
$('input:checkbox').change(updateEmployees);

Answer 2

попробуйте использовать метод stringify со следующими параметрами:

var myJSON = JSON.stringify(ajaxResult, null, 2);