Loop Through json_encoded PHP Array в JavaScript

Question

У меня возникла проблема с циклом через массив, который был передан из PHP через запрос Ajax.

По какой-то причине мой javascript считает, что либо каждый символ является частью массива, либо моя переменная ответа просто передается как строка.

Вот мой JavaScript:

<script>   
    $(function() { 
     $.ajax({ 
      url: "/dev/editButton/get_names.php", 
      success: function(response) { 
       console.log(response); 
      } 
     }); 
    }); 
</script> 

А вот мой PHP:

<?php 
include '../portfolio/libraries/settings.php'; 

$connect = mysqli_connect($HOST, $DB_USER, $DB_PASS, $DATABASE); 
$query = "SELECT * FROM AUTH_User"; 
$result = mysqli_query($connect, $query); 

$names = array(); 

while ($row = mysqli_fetch_array($result)) { 
    array_push($names, $row['FirstName']." ".$row['LastName']); 
} 

echo json_encode($names); 
?> 

ответ, который я получаю выглядит следующим образом:

["Test Person","Test2 Person"]

Однако, если я пройду через это с помощью javascript или просто распечатать response[0] Я получаю каждый символ как часть массива. Первый элемент будет [, рядом будет " и т.д.

Я хотел бы Test Person, чтобы быть одним из элементов и Test2 Person быть другим.

Кто-нибудь знает, что я делаю неправильно? Благодаря!

Answer 1

Вам нужно использовать JSON.parse для ответа. Wihtout, вызывающий эту функцию, вы просто получаете индекс символов в строке JavaScript.

var resultArray = JSON.parse(response); 
resultArray[0]; //Should Be "test Person" 

Answer 2

Результат метода .ajax интерпретируется в соответствии с Content-Type заголовок ответа. Если он неверен или не указан, переменная response будет содержать исходный код json в виде строки.

Так одно решение изменить PHP код, добавив следующую строку:

header("Content-Type: text/json"); 

Docs:

Тип предварительной обработки зависит по умолчанию от Content-Type в мерах в ответ на , но может быть явно задан с использованием опции dataType. Если предоставлен параметр dataType, заголовок Content-Type ответа будет проигнорирован.

Вы можете разобрать этот текст на объект или вы можете позволить JQuery сделать это для вас, указав тип данных в вызове. Параметр response будет удерживать объект вместо строки raw json.

Docs:

Если указан JSON, ответ анализируется с использованием jQuery.parseJSON перед передачей, как объект, в обработчик успеха. Проанализированный объект JSON доступен через свойство responseJSON объекта jqXHR .

$(function() { 
    $.ajax({ 
     url: "/dev/editButton/get_names.php", 
     datatype: "json", 
     success: function(response) { 
      console.log(response); 
     } 
    }); 
}); 

Answer 3

Вы должны разобрать JSON в массив. Вы можете сделать это, используя следующий код:

var arr = $.parseJSON(response); 

Теперь обр [0] должен быть «испытуемый».

Answer 4

Вы можете сделать это трудный путь, или таким образом:

Во-первых, необходимо указать тип возвращаемого значения для AJAX.

$(function() { 
    $.ajax({ 
     url: "/dev/editButton/get_names.php", 
     dataType: "json", 
     success: function(response) { 
      console.log(response); 
     } 
    }); 
}); 

В качестве альтернативы, вы можете сделать это следующим образом:

$(function() { 
    $.getJSON("/dev/editButton/get_names.php", function(response) { 
     console.log(response); 
    }); 
}); 

Для этого, чтобы работать, вам нужно будет указать HTML заголовки соответственно в PHP:

<?php 
include '../portfolio/libraries/settings.php'; 

$connect = mysqli_connect($HOST, $DB_USER, $DB_PASS, $DATABASE); 
$query = "SELECT * FROM AUTH_User"; 
$result = mysqli_query($connect, $query); 

$names = array(); 

while ($row = mysqli_fetch_array($result)) { 
    array_push($names, $row['FirstName']." ".$row['LastName']); 
} 

header("Content-Type: application/json"); 
echo json_encode($names); 
exit(); 
?> 

exit(); является просто для безопасности, чтобы вы не испортили действительный формат JSON.

JSON обозначает JavaScript Object Notation, поэтому вам не нужно ничего делать там сложным. Вот простой цикл можно использовать, например:

for(var i in response) { 
    console.log(response[i]); 
} 

В качестве альтернативы, если ответ не является массив, а объект со свойствами, вы могли бы перебрать свойство объекта, получая нужные клавиши первыми:

var objKeys = Object.keys(response); 
for(var i in objKeys) { 
    var key = objKeys[i]; 
    console.log(response[key]); 
} 

Надеюсь, это поможет!

Answer 5

В этой конкретной ситуации, вы можете использовать

 success: function(response) { 
      response = eval(response); 
      console.log(response); 
     } 

Но это плохая практика.

Действительно лучшее решение здесь, чтобы изменить свою Ajax вызова следующим образом:

$(function() { 
    $.ajax({ 
     url: "/dev/editButton/get_names.php", 
     datatype: 'json', 
     success: function(response) { 
      console.log(response); 
     } 
    }); 
}); 

Указанного типа данных, будет запрашивать возвращаемые данные, чтобы быть в формате JSON, и JQuery будет автоматически разобрать его на JavaScript Object.