Вывести из JSON массива данные в html

Question

Вот JS

$(".btn").on("click", function(e) {
  e.preventDefault();
  $.ajax({
    url: "mail.php",
    method: 'post',
    data: {
      index: "1"
    },
    success: function (response) {
        var json = response;
        console.log(json);
    }
 });

Вот PHP

if(isset($_POST['index'])) {
    $index = strip_tags($_POST['index']);
    if($index == "1") {
        $res = array(
            'name' => 'Den',
            'age' => '30'
        );
        echo json_encode($res);
        die();      
    }
}

Выводит в консоли

{"name":"Den","age":"30"}

Вот такой JS

console.log(json.name +"  "+ json.age);

Не выводит "Den 30". Не могу понять почему.

Answer 1

Сначала нужно спарсить json через JSON.parse() (подробнее), а потом уже выводить отдельные его элементы:

$(".btn").on("click", function(e) {
  e.preventDefault();
  $.ajax({
    url: "mail.php",
    method: 'post',
    data: {
      index: "1"
    },
    success: function (response) {
        var json = JSON.parse(response);        // парсинг полученного json
        console.log(json.name +"  "+ json.age); // вывод результата
    }
 });

Answer 2

По дефолту $.ajax сам догадывается какой тип данных приходит от сервера. Но если нужно указать прям точно железобетонно что ожидаешь json, то достаточно добавить строку

dataType: 'json',

к остальным параметрам ajax, т.е.

url: "mail.php",
method: 'post',
dataType: 'json',

А сейчас возможно это воспринимается как строка.

БЛОГ НА HUSL

Вывести из JSON массива данные в html

Ответы (2 шт):