Правильное сохранение объектов javascipt?

Добрый день.

недавно начал разбираться с JS и PHP, так что возможны неточности в описании моих действий:)

Для начала опишу свои действия.
Из mysql при помощи php (файл getjson.php) функции json_encode() формирую JSON объекты.
...
//getjson.php
$var = array();
$sql = "SELECT * FROM planer";
$result = mysqli_query($con, $sql);
while($obj = mysqli_fetch_object($result)) {
    $var[] = $obj;
}
echo '{"planer":'.json_encode($var).'}'; //формируем объекы
...


Далее используя Jquery преобразую JSON в js объекты и вывожу в виде таблицы.
var url="getjson.php";
        $("#jsondata tbody").html("");
        $.getJSON(url, function (data) {
               $.each(data.planer, function (i, planer) {
                // console.log(planer);
                var newRow =
                    "<tr>"
                        + "<td class='td_id'>" + planer.idPlaner + "</td>"
                        + "<td class='td_date'>" + planer.DatePlaner + "</td>"
                        + "<td class='td_time'>" + planer.TimePlaner + "</td>"
                        + "</tr>";
                $(newRow).appendTo("#jsondata tbody");
            });
        });


Скрипт работает хорошо.
Но т.к объекты js перебираются в анонимных функциях не получается сохранить преобразованные объекты отдельно.
Подскажите как это лучше всего сделать?

Тут я пытаюсь сохранить их и вывести: тут затык)
var myjsonarr=new Array();
       //...
       $.getJSON(url, function (data) {
                //console.log(data);
                myjsonarr=data;
                //...
        });
        console.log("мой вывод");
        console.log(myjsonarr);


Но в консоль не выводятся массив myjsonarr(пишет undefined);

Хочу я это сделать к примеру для фильтрации результата запроса уже только на клиенте, без обращения к серверу.
Подскажите хорошие варианты решения.
  • Вопрос задан
  • 3566 просмотров
Решения вопроса 1
@m-haritonov
1. Порядок выполнения инструкций будет следующим:
var myjsonarr=new Array(); // 1
       $.getJSON(url, function (data) {
                myjsonarr=data; // 5
        }); // 2
        console.log("мой вывод"); // 3
        console.log(myjsonarr); // 4


Поэтому выполнять "console.log(myjsonarr)" надо в другом событии (например, во время клика по ссылке, который выполняется уже после того, как была вызвана callback функция, переданная в getJSON).

2. Приведённый Вами кусок кода должен выводить в консоль не "undefined", а "[]".
3. Если Вы хотите сохранить переменную просто для дальнейшего использования, то Вы правильно сохраняете переменную, просто console.log слишком рано:
<!DOCTYPE html>
<html>
<head>
	<script src="http://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
	<script type="text/javascript">
	$(function(){
		// Присваивать массив данной переменной нужно лишь в случае,
		// если ниже будет код "myjsonarr.push(data)" а не "myjsonarr = data"
		var myjsonarr;
		
		$.getJSON('getjson.php', function (data) {
			myjsonarr = data;
		});
		
		// На данный момент новое значение ещё не присвоено переменной myjsonarr
		console.log(myjsonarr);
		
		$('a').click(function(){
			// А когда пользователь, подождав немного, кликнет на ссылку,
			// переменная уже будет содержать новое значение
			console.log(myjsonarr);
		});
	});
	</script>
</head>
<body>
	<a href="#">Вывести объект</a>
</body>
</html>


Если же Вы хотите вызывать код построения таблицы и в вызове getJSON и из другого места, то можно поступить примерно следующим образом:
<!DOCTYPE html>
<html>
<head>
	<script src="http://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
	<script type="text/javascript">
	$(function(){
		function showRows(data)
		{
			$("#jsondata").html("");
			$.each(data.planer, function(i, planer){
				var newRow = "<tr>"
				+ "<td class='td_id'>" + planer.idPlaner + "</td>"
				+ "<td class='td_date'>" + planer.DatePlaner + "</td>"
				+ "<td class='td_time'>" + planer.TimePlaner + "</td>"
				+ "</tr>";
					
				$(newRow).appendTo("#jsondata");
			});
		}
		
		var myjsonarr;
		$('a').click(function(){
			if (myjsonarr)
				showRows(myjsonarr);
			else
			{
				$.getJSON('getjson.php', function(data){
					myjsonarr = data;
					showRows(myjsonarr);
				});
			}
		});
	});
	</script>
</head>
<body>
	<a href="#">Вывести объект</a>
	<table id="jsondata"></table>
</body>
</html>
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
Fesor
@Fesor
Full-stack developer (Symfony, Angular)
1) Не удержался и решил чуть подправить. Это не очень хорошо, когда вы чем-то дополняете вывод json_encode.
//getjson.php
$json = [
    'planer' => []
];
$sql = "SELECT * FROM planer";
$result = mysqli_query($con, $sql);
while($obj = mysqli_fetch_object($result)) {
    $json['planner'][] = $obj;
}
echo json_encode($json); //формируем объекы


2) вместо .html(""); можно использовать .empty();
3) используйте шаблоны на клиенте, облегчите себе жизнь.
4) используйте deferred объекты (habrahabr.ru/post/112960/) что бы упростить конструкции.

Ну это так... просто подумать поразмышлять...

Если по делу - вам нужен какой-то менеджер, клиент для апишки. Например такой:

function MyApiClient(url) {
    this.url = url;
}

MyApiClient.prototype = {
    getRecords: function (){
        // можно прямо тут обрабатывать результаты запроса и сохранять их в нашем сервисе
        // извне мы будем работать только с обещаниями ($.deferred).
        return $.getJson(this.url);
    },
}
Ответ написан
peter23
@peter23
Вместо $.each можно использовать
for(i in data.planer) {
    console.log(data.planer[i]);
}


Кстати, код, который вы привели с myjsonarr, не работает потому, что console.log выполняется раньше, чем функция в getJSON.
Ответ написан
viktorvsk
@viktorvsk
var myjsonarr=new Array();
       //...
       $.getJSON(url, function (data) {
                //console.log(data);
                myjsonarr=data;
                console.log("мой вывод");
                console.log(myjsonarr);
                //...
        });

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

Войдите, чтобы написать ответ

Похожие вопросы