Как распарсить php массив на стороне клиента

@Fantom1987 · Регистрация: 03.08.2019

Студворк — интернет-сервис помощи студентам

Всем привет.
Ребят, помогите, пожалуйста.

PHP
1
2
3
4
5
6
$stmt = $pdo->query("SELECT title FROM equipment_of_users WHERE user_id = $us_ses_id AND subtitle = 'трактор' AND engine_kvt >= $kvtplow AND engine_ls >= $lsplow");
$data = array(); 
while ($result = $stmt->fetch(PDO::FETCH_ASSOC)){ 
            $data[] = $result; 
        } 
        echo json_encode($data);

с php отправляется в js массив и приходит он в таком формате:

JSON
1
[{"title":"JCB Fastrac 3000 Xtra"},{"title":"NEW HOLLAND T8"}]

файл js:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(document).ready(function() {
    $errors = $('span.errors');
    $spanselect = $('span.select');
    $enterplow = $('select[name="enterplow"]');
    $enterplow.bind('change', function() {
        $.post('../fieldfunc', {plows : $enterplow.val()}, function(data) {
            if (data == "Сделайте выбор!") {
                $errors.text(data);
            }
            if (data == 'У Вас в наличии нет подходящего трактора.<br> <a href="tractors" style="color: green;">купить</a>') {
                $errors.html(data);
            }
            if (data != 0) {
                data = JSON.parse(data);
// data = JSON.stringify(data);
for (var data in data) {
    $('select[name="tract"]').append("<option value=" + data + ">" + data['title'] + "</option>");
}
console.log(data);
}
});
});
});

в результате ошибка:
Uncaught SyntaxError: Unexpected token [ in JSON at position 1
at JSON.parse (<anonymous>)
at Object.success (field.js:14)
at c (jquery-3.4.1.min.js:2)
at Object.fireWith [as resolveWith] (jquery-3.4.1.min.js:2)
at l (jquery-3.4.1.min.js:2)
at XMLHttpRequest.<anonymous> (jquery-3.4.1.min.js:2)

Три дня на одном месте. Гугл перерыл вдоль и поперек. А результат, то ошибки в консоле, то вот такая ахинея:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<select name="tract">
  <option value="0"></option>
  <option value="0">undefined</option>
  <option value="1">undefined</option>
  <option value="2">undefined</option>
  <option value="3">undefined</option>
  <option value="4">undefined</option>
  <option value="5">undefined</option>
  <option value="6">undefined</option>
  ..............
  <option value="59">undefined</option>
...........
180 +
</select>

Буду рад любым советам..

@Yura007 · 27.09.2019, 12:30

Ну у вас вроди бы все хорошо к вам приходит массив объектов доступ к ним идет Имя_массива[индекс массива].имя_поля_объекта
[{"title":"JCB Fastrac 3000 Xtra"},{"title":"NEW HOLLAND T8"}]
если это пришло в дате то читаете как data[i].title i соответственно в цикле увеличиваете

@Fantom1987 · 27.09.2019, 13:30 **[ТС]**

Сообщение от Yura007

если это пришло в дате

именно в дату и прилетает

Сообщение от Yura007

то читаете как data[i].title i соответственно в цикле увеличиваете

можно подробнее? не совсем понятно

@Yura007 · 27.09.2019, 13:51

Ну смотрите если дата у вас содержит массив объектов в виде [{"title":"JCB Fastrac 3000 Xtra"},{"title":"NEW HOLLAND T8"}]
то определяете кол-во объектов в массиве
let data_length = data.length;
далее делаете цикл

for(i = 0; data_length != i ; i++){
console.log(data[i].title);
}
я просто не знаю куда подробнее можно описать.

Добавлено через 5 минут
просто вам нужно посмотреть тему с массивами и как работать с объектами в массивах .
Вам нужно просто вывести дату в консоль что бы понять как данные к вам приходят .
к примеру что бы потрогать первый элемент объекта с индексом 0 вы пишите data[0].title и она будет равна JCB Fastrac 3000 Xtra; data[1].title будет равна NEW HOLLAND T8 / Ну а имея эти данные можете конечно и новый массив сделать более понятный для вас . Но оперировать данными в такой форме в принципе достаточно удобно с учётом того что не нужно бегать по объекту в цикле и искать нужный элемент .

@Fantom1987 · 27.09.2019, 14:43 **[ТС]**

Yura007, спасибо за объяснения. Все бы было хорошо, но уже перепробовал не мало способов решения этой проблемы и обращение по вашему примеру в том числе. В итоге 3 варианта: 1. ошибки в консоль, 2. никакого результата и 3. undefined. Попробовал поплясать по вашим советам - undefined в консоль. Вот такая беда.

@Yura007 · 27.09.2019, 16:30

вы уверены что к вам приходит на клиент то что вы описали

JavaScript
1
2
3
4
5
6
7
8
<script type="text/javascript">
    let data = [{"title":"JCB Fastrac 3000 Xtra"},{"title":"NEW HOLLAND T8"}];
    console.log(data);
    for(i=0; i != data.length;i++){
        console.log(data[i].title);
    }
 
</script>

данный вариант работает вам просто нужно аккуратно отредактировать ваш цикл

Добавлено через 11 минут
Не нужно отчаиваться =) У вас все получится

JavaScript
1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
    let data = [{"title":"JCB Fastrac 3000 Xtra"},{"title":"NEW HOLLAND T8"}];
    console.log(data);
    for(i=0; i != data.length;i++){
        console.log(data[i].title);
    }
 
for (i=0; i != data.length;i++) {
    $('select[name="tract"]').append("<option value=" + data[i] + ">" + data[i].title + "</option>");
}
</script>

@Fantom1987 · 27.09.2019, 16:40 **[ТС]**

это ваш скрипт
(2)*[{…}, {…}]0: {title: "JCB Fastrac 3000 Xtra"}1: {title: "NEW HOLLAND T8"}length: 2__proto__: Array(0)
field:87 JCB Fastrac 3000 Xtra
field:87 NEW HOLLAND T8
favicon.ico:1 GET http://test/favicon.ico 404 (Not Found)

а это то, что прилетает мне

field.js:14 2[{"title":"JCB Fastrac 3000 Xtra"},{"title":"NEW HOLLAND T8"}]
field.js:15 string
долбанная строка

хьюстон, у меня проблема

@Fantom1987 · 27.09.2019, 19:19 **[ТС]**

Yura007, переписал код воспользовавшись вашими советами

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$(document).ready(function() {
$errors = $('span.errors');
$spanselect = $('span.select');
$enterplow = $('select[name="enterplow"]');
$enterplow.bind('change', function() {
$.ajax({ 
type: 'POST', 
url: '../fieldfunc',
data: { plows: $enterplow.val() }, 
success: function (data) { 
if (data == "Сделайте выбор!") {
$errors.text(data);
}
if (data == 'У Вас в наличии нет подходящего трактора.<br> <a href="tractors" style="color: green;">купить</a>') {
$errors.html(data);
}
if (data != 0) {
console.log(data);
console.log(typeof(data));
for (var i=0; i != data.length;i++) {
    $('select[name="tract"]').append("<option value=" + data[i] + ">" + data[i].title + "</option>");
}
}
}
});
});
});

+ скрины

по сути, доки говорят, что json_encode передает Строку. Но на выходе 1.png - undefine. а 2.png - вообще без комментариев..
WTF?

Почему так происходит?

@Yura007 · 27.09.2019, 22:06

когда данные пришли на клиент вы забыли data = JSON.parse(data); я это не писал потому, что я взял массив с объектами готовый. тот который вы указали в первом посте .

перед циклом данные парсить нужно .

Добавлено через 2 минуты
и в первом посте она у вас указана, а в переписанном последнем посте отсутствует . Поставьте ее на место и попробуйте еще раз )

@Fantom1987 · 27.09.2019, 22:14 **[ТС]**

Сообщение от Yura007

Поставьте ее на место и попробуйте еще раз )

data = JSON.parse(data); эта строчка на своем месте. просто сначала вставил код, а потом в редакторе продолжил пляски с бубном))
результат полностью ожидаемый:
Uncaught SyntaxError: Unexpected token [ in JSON at position 1
at JSON.parse (<anonymous>)
at Object.success (field.js:18)
at c (jquery-3.4.1.min.js:2)
at Object.fireWith [as resolveWith] (jquery-3.4.1.min.js:2)
at l (jquery-3.4.1.min.js:2)
at XMLHttpRequest.<anonymous> (jquery-3.4.1.min.js:2)
вот такие пироги..

JavaScript
1
2
3
4
5
6
7
8
if (data != 0) {
data = JSON.parse(data);
    console.log(data);
    console.log(typeof(data));
    for (var i=0; i != data.length;i++) {
        $('select[name="tract"]').append("<option value=" + data[i] + ">" + data[i].title + "</option>");
    }
}

@Fantom1987 · 27.09.2019, 22:23 **[ТС]**

json валидный, все прекрасно, а работать как нужно ни за что

@Fantom1987 · 27.09.2019, 22:56 **[ТС]**

проблема была успешно решена

Yura007, вам огромное спасибо за подсказки, советы

Много чего узнал и помогло в решении)

@Yura007 · 27.09.2019, 23:17

рад за Вас ... переписал ваш код там все было рабочее .... А данная ошибка могла возникать только если вы передавали данные без json_encode / но она вроде указана .

Удачи =)

@Fantom1987 · 27.09.2019, 23:30 **[ТС]**

Сообщение от Yura007

переписал ваш код там все было рабочее

проблема была в php. вывел echo, из за которого получилась вся головоломка.

осталась одна не понятная для меня вещь
вместо того, чтобы менять option'ы, они просто постоянно добавляются при каждой смене первого селекта

HTML5
1
2
3
4
5
6
7
8
<select name="tract">
<option value="0"></option>
<option value="JCB Fastrac 3000 Xtra">JCB Fastrac 3000 Xtra</option>
    <option value="NEW HOLLAND T8">NEW HOLLAND T8</option>
    <option value="NEW HOLLAND T8">NEW HOLLAND T8</option>
    <option value="JCB Fastrac 3000 Xtra">JCB Fastrac 3000 Xtra</option>
    <option value="NEW HOLLAND T8">NEW HOLLAND T8</option>
</select>

не могу понять в чем проблема...

@Yura007 · 27.09.2019, 23:52

jQuery метод .append() позволяет вставить содержимое, указанное в параметре метода в конец каждого выбранного элемента в наборе совпавших элементов. Метод вставляет указанное содержимое как последний дочерний элемент.

@Fantom1987 · 28.09.2019, 00:12 **[ТС]**

что делает этот метод я знаю, но проблему это не решает

@Yura007 · 28.09.2019, 07:51

ну тогда нужно посмотреть какие методы есть еще у jQuery =) .... и перед повторным запуском найти тот который очистить тебе <select name="tract"> наверное так )). И тогда при повторном нажатии на заветную кнопочку будет так как нужно .

@Fantom1987 · 28.09.2019, 09:52 **[ТС]**

Сообщение от Yura007

ну тогда нужно посмотреть какие методы есть еще у jQuery

вот тут то начинается самое интересное) jquery есть только два метода которые будут работать в таком раскладе. это append и prepend. оба метода делают практически одно и тоже. т.е. не вариант)) в js, к примеру, innerHTML. но он на отрез отказывается передавать переменные.
с парсингом был мой "косяк". хотя есть огромный + понял что и как работает до мелочей.. а с этим дублированием реальная головоломка. возможно с помощью чистого js можно как то решить вопрос, но я не настолько глубоко его знаю

Добавлено через 6 минут

Сообщение от Yura007

при повторном нажатии на заветную кнопочку будет так как нужно

кнопка конечно будет, но функционал на нее рассчитан совсем другой. и да, можно сделать проверку что было выбрано и отвечает ли оно, скажем так, моим требованиям. если нет, то вывести ошибку. ноооо кто меня тогда умным назовет))) сам сделал косяк и еще ошибки показывает..))) потому не вариант, к сожалению.

Добавлено через 7 минут

Сообщение от Yura007

найти тот который очистить тебе <select name="tract">

его искать не надо) метод называется .empty() но как его правильно применить, хз. пробовал в цикле и так и сяк, но результат не тот.

@Yura007 · 28.09.2019, 10:06

JavaScript
1
2
3
4
5
6
<select class="tractor" name="tract">
  <option value="0"></option>
 
</select>
 
$('.tractor').find('option').remove();

Добавлено через 1 минуту

JavaScript
1
$('.tractor').find('option').remove();

это нужно установить перед запросом на сервер что бы перед каждым вызовом очищал тебе select

@Fantom1987 · 28.09.2019, 10:26 **[ТС]**

Сообщение от Yura007

.remove();

этот метод вылетел с головы. а я пробовал таким же образом чистить с помощью empty

Благодарю

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Yura007 61 / 44 / 16 Регистрация: 09.02.2019 Сообщений: 149
	27.09.2019, 12:30
	Ну у вас вроди бы все хорошо к вам приходит массив объектов доступ к ним идет Имя_массива[индекс массива].имя_поля_объекта [{"title":"JCB Fastrac 3000 Xtra"},{"title":"NEW HOLLAND T8"}] если это пришло в дате то читаете как data[i].title i соответственно в цикле увеличиваете 0

@Yura007 61 / 44 / 16 Регистрация: 09.02.2019 Сообщений: 149
	27.09.2019, 13:51
	Ну смотрите если дата у вас содержит массив объектов в виде [{"title":"JCB Fastrac 3000 Xtra"},{"title":"NEW HOLLAND T8"}] то определяете кол-во объектов в массиве let data_length = data.length; далее делаете цикл for(i = 0; data_length != i ; i++){ console.log(data[i].title); } я просто не знаю куда подробнее можно описать. Добавлено через 5 минут просто вам нужно посмотреть тему с массивами и как работать с объектами в массивах . Вам нужно просто вывести дату в консоль что бы понять как данные к вам приходят . к примеру что бы потрогать первый элемент объекта с индексом 0 вы пишите data[0].title и она будет равна JCB Fastrac 3000 Xtra; data[1].title будет равна NEW HOLLAND T8 / Ну а имея эти данные можете конечно и новый массив сделать более понятный для вас . Но оперировать данными в такой форме в принципе достаточно удобно с учётом того что не нужно бегать по объекту в цикле и искать нужный элемент . 1

@Fantom1987 52 / 35 / 16 Регистрация: 03.08.2019 Сообщений: 389
	27.09.2019, 14:43 [ТС]
	Yura007, спасибо за объяснения. Все бы было хорошо, но уже перепробовал не мало способов решения этой проблемы и обращение по вашему примеру в том числе. В итоге 3 варианта: 1. ошибки в консоль, 2. никакого результата и 3. undefined. Попробовал поплясать по вашим советам - undefined в консоль. Вот такая беда. 0

@Fantom1987 52 / 35 / 16 Регистрация: 03.08.2019 Сообщений: 389
	27.09.2019, 16:40 [ТС]
	это ваш скрипт (2)*[{…}, {…}]0: {title: "JCB Fastrac 3000 Xtra"}1: {title: "NEW HOLLAND T8"}length: 2__proto__: Array(0) field:87 JCB Fastrac 3000 Xtra field:87 NEW HOLLAND T8 favicon.ico:1 GET http://test/favicon.ico 404 (Not Found) а это то, что прилетает мне field.js:14 2[{"title":"JCB Fastrac 3000 Xtra"},{"title":"NEW HOLLAND T8"}] field.js:15 string долбанная строка хьюстон, у меня проблема 0

@Yura007 61 / 44 / 16 Регистрация: 09.02.2019 Сообщений: 149
	27.09.2019, 22:06
	когда данные пришли на клиент вы забыли data = JSON.parse(data); я это не писал потому, что я взял массив с объектами готовый. тот который вы указали в первом посте . перед циклом данные парсить нужно . Добавлено через 2 минуты и в первом посте она у вас указана, а в переписанном последнем посте отсутствует . Поставьте ее на место и попробуйте еще раз ) 1

@Fantom1987 52 / 35 / 16 Регистрация: 03.08.2019 Сообщений: 389
	27.09.2019, 22:23 [ТС]
	json валидный, все прекрасно, а работать как нужно ни за что Миниатюры 0

@Fantom1987 52 / 35 / 16 Регистрация: 03.08.2019 Сообщений: 389
	27.09.2019, 22:56 [ТС]
	проблема была успешно решена Yura007, вам огромное спасибо за подсказки, советы Много чего узнал и помогло в решении) 0

@Yura007 61 / 44 / 16 Регистрация: 09.02.2019 Сообщений: 149
	27.09.2019, 23:17
	рад за Вас ... переписал ваш код там все было рабочее .... А данная ошибка могла возникать только если вы передавали данные без json_encode / но она вроде указана . Удачи =) 0

@Yura007 61 / 44 / 16 Регистрация: 09.02.2019 Сообщений: 149
	27.09.2019, 23:52
	jQuery метод .append() позволяет вставить содержимое, указанное в параметре метода в конец каждого выбранного элемента в наборе совпавших элементов. Метод вставляет указанное содержимое как последний дочерний элемент. 0

@Fantom1987 52 / 35 / 16 Регистрация: 03.08.2019 Сообщений: 389
	28.09.2019, 00:12 [ТС]
	что делает этот метод я знаю, но проблему это не решает 0

@Yura007 61 / 44 / 16 Регистрация: 09.02.2019 Сообщений: 149
	28.09.2019, 07:51
	ну тогда нужно посмотреть какие методы есть еще у jQuery =) .... и перед повторным запуском найти тот который очистить тебе <select name="tract"> наверное так )). И тогда при повторном нажатии на заветную кнопочку будет так как нужно . 0