Как верно обработать JSON данные?

Question

[doublench21]

Есть JSON данные следующего формата:

{
   0: "1",
   1: "0.39578100 1412014767",
   2: "755097411bb87a6a5894e39d9aac3bc4",
   3: "2",
   4: "0.43935900 1412014767",
   5: "2cab74f361f62e1f0bca2f593072e8db",
  /* ... */
}

Пытаюсь добавить эти данные в html в следующие теги по три элемента:

<tr id="1"><td>  </td><td>  </td><td>  </td></tr>
<tr id="2"><td>  </td><td>  </td><td>  </td></tr>
 <!-- ... -->

Пока есть только вот такое "скудное":

$.getJSON(
            "server.php",
            {
                param1: static_rows
            },
            onAjaxSuccess
        );

        function onAjaxSuccess(data) {
            $.each(data, function(key, val){
                items.push(' ');
                $("#info").html(s);
            });


        }

Answer 1

[Евгений Петров]

1. Нельзя начинать имя свойства с цифры. В вашем случае требуются вложенные массивы вида

{
	"t1": [
		"1",
		"0.39578100 1412014767",
		"755097411bb87a6a5894e39d9aac3bc4"
	],
	"t2": [
		"2",
		"0.43935900 1412014767",
		"2cab74f361f62e1f0bca2f593072e8db"
	]
}

2. Нельзя начинать значения атрибутов id и name с цифры. Да и вообще с цифры начинаются числа. Имена с цифры начинаться не могут. В соответствии с кодом выше:

<tr id="t1"><td></td><td></td><td></td></tr>
<tr id="t2"><td></td><td></td><td></td></tr>

3. Ну а дальше просто

function onAjaxSuccess(data) {
	$.each(data, function(key, rowData) {
		var cells = $('#' + key).find('td');

		$.each(rowData, function(index, value) {
			cells.eq(index).html(value);
		});
	});
}

Comments

[doublench21]

Переделал. Верно ли :

<?php
@mysql_connect("localhost", "root", "")
    or die;
mysql_select_db("random_base");
mysql_set_charset("utf8");
header('Content-Type: application/x-javascript; charset=utf8');

if(isset($_GET['static_rows'])) {
    $sql_static_load="SELECT * FROM `time` LIMIT 0,"." ".$_GET['static_rows']
        or die;
    $q=mysql_query($sql_static_load)
        or die;
    $arr=array();
    for($i=0;$i<mysql_num_rows($q);$i++) {
        $arr["t".($i+1)]=mysql_result($q, $i, 0);
        $arr["t".($i+1)]=mysql_result($q, $i, 1);
        $arr["t".($i+1)]=mysql_result($q, $i, 2);
    }
    echo json_encode($arr);
} else {
    $sql_new_load="SELECT * FROM `time` LIMIT ".$_GET['current_rows'].", ".($_GET['current_rows'] + $_GET['new_rows'] - 1)
        or die;
    $q=mysql_query($sql_new_load)
        or die;
    $arr=array();
    for($i=0;$i<mysql_num_rows($q);$i++) {
        $arr["t".($i+1)]=mysql_result($q, $i, 0);
        $arr["t".($i+1)]=mysql_result($q, $i, 1);
        $arr["t".($i+1)]=mysql_result($q, $i, 2);
    }
    echo json_encode($arr);
}

[Евгений Петров]

Я не знаю синтаксиса PHP. Мы обсуждаем разбор JSON на клиенте. Сказать — правильно или нет вы формируете JSON, я не могу.

[doublench21]

А не подскажете, как мне проверить, что я получаю за JSON данные с сервера ?

[Евгений Петров]

Консолью в браузере воспользуйтесь.

[doublench21]

@Petroveg а можно подробнее пожалуйста

[Евгений Петров]

Первым делом в функции, вызываемой после получения ответа, показать в консоли:

function onAjaxSuccess(data) {
console.log(data);
...
}

Другой вариант — открываете анализатор, находите вкладку «Сеть» или «Network». Отправляете запрос своему php-файлу и смотрите на полученный ответ.

[doublench21]

@Petroveg прописал. Не выводит абсолютно ничего. Дело явно в сервере ?

[Евгений Петров]

@doublench21 а что вкладка «Сеть» показывает? Нужно кликнуть на запрос и там всё написано.

[doublench21]

@Petroveg
В Headers:
Remote Address:127.0.0.1:25470
Request URL:localhost:25470/new_project/server.php?param1=20
Request Method:GET
Status Code:200 OK
Request Headersview source
Accept:application/json, text/javascript, */*; q=0.01
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8,ru;q=0.6
Cache-Control:max-age=0
Connection:keep-alive
Cookie:count=8
Host:localhost:25470
Referer:localhost:25470/new_project/index.php
User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.124 Safari/537.36
X-Requested-With:XMLHttpRequest
Query String Parametersview sourceview URL encoded
param1:20
Response Headersview source
Content-Length:0
Content-type:text/html
Server:PhpStorm 7.1.4
X-Powered-By:PHP/5.5.12

В Preview - пусто

[Евгений Петров]

Вы получаете ответ с Content-Length: 0
Что вы ждёте от других, и меня в частности?
Ваш скрипт на сервере работает неверно, отдавая пустой ответ.

[doublench21]

@Petroveg я и хотел понять где проблема. Теперь ясно что на серваке. Вот это и спрашивал ))

[Евгений Петров]

Вовсе нет — вы спрашивали: «Как верно обработать JSON данные?». Что я вам и рассказал. А как формировать ответ — заводите тему с тэгом php.

[doublench21]

@Petroveg я имел ввиду продолжение вопроса. Спасибо Вам. Рассеяли туман.

[doublench21]

@Petroveg исправил всё. Теперь на запрос я получаю следующее:

[{"t1":["1","0.39578100 1412014767","755097411bb87a6a5894e39d9aac3bc4"]},{"t2":["2","0.43935900 1412014767","2cab74f361f62e1f0bca2f593072e8db"]},{"t3":["3","0.49016100 1412014767","e055f57986ffac47cc156d726a066753"]},{"t4":["4","0.56763100 1412014767","076fa4764de69ef698982a72e6fa7543"]},{"t5":["5","0.60519100 1412014767","23ab772a950525115cb11e7213fb0e7d"]},{"t6":["6","0.66575500 1412014767","95cafaa3959f983b90d5c55ddf866636"]},{"t7":["7","0.72346700 1412014767","68d1037f31394f87557b3e6095da9a9c"]},{"t8":["8","0.78339400 1412014767","6dd507ffa3fa1681f520062ac0ea3122"]},{"t9":["9","0.84326600 1412014767","0937a60a3424bc8fbc7ab3f350daade4"]},{"t10":["10","0.86484300 1412014767","4a9b25c7b9a99ef9083ae3f3e3916bb8"]},{"t11":["11","0.93680200 1412014767","624542d1384eba0f9516ed7734b6001d"]},{"t12":["12","0.94785800 1412014767","c141403c9aefeb29fe70b9c9ffe49c2d"]},{"t13":["13","0.96438400 1412014767","36be12fce7b50b99c75531f2ca303c98"]},{"t14":["14","0.98099600 1412014767","d7a423a2c908cd2da714fcf87bf79da3"]},{"t15":["15","0.99758100 1412014767","4bea14b6f61dd5bf0b151b3de8732db4"]},{"t16":["16","0.01420800 1412014768","f727477f82b9e78ff33777a45e3bdff1"]},{"t17":["17","0.03077700 1412014768","1c439284988d62a331e03a000841f758"]},{"t18":["18","0.04734900 1412014768","3f8542f6d0ea0d89da3d217f2a69f2a6"]},{"t19":["19","0.06407000 1412014768","8409b79248b0d94f096aa89b7fba740a"]},{"t20":["20","0.15014500 1412014768","16278724433ccacaa573ea6bd89a12e8"]},{"t21":["21","0.17488600 1412014768","c07b718876f078907637e543a1bd6205"]},{"t22":["22","0.23556300 1412014768","cf90d65510668a537497702c350b300c"]},{"t23":["23","0.26965700 1412014768","2252b4a7b566ad6f46ae643ac37927ba"]},{"t24":["24","0.31872700 1412014768","4f90681bc4c797c86ea1a66d879f04c5"]},{"t25":["25","0.35812900 1412014768","fc69ea1f42d8c8f9d65aa115e47694cf"]},{"t26":["26","0.41833400 1412014768","9b79aeb409b7ad2d0e9a187f0ff50791"]},{"t27":["27","0.54752300 1412014768","4554957e82d12875d53f680c99d01511"]},{"t28":["28","0.68413700 1412014768","e3af85658968f18bd0dfd43bfdc02a4c"]},{"t29":["29","0.06286900 1412014769","6ed4da4441ac603336a35b79acb07860"]},{"t30":["30","0.19883900 1412014769","d0fa08e749a6cb6de1542c71b999de1a"]},{"t31":["31","0.28929100 1412014769","31a140b96de709d099ee68de705d7893"]},{"t32":["32","0.39874600 1412014769","01fce4dc2bb81248e2329c3e066f1c29"]},{"t33":["33","0.75057300 1412014769","73e2f321f9d9c14b35f74a6d05426b51"]},{"t34":["34","0.87804300 1412014769","d3058b1494c314da8cb3e8a65dfb61ed"]},{"t35":["35","0.97776800 1412014769","fc5e67bc40b38da100975cfd553c2a04"]},{"t36":["36","0.09683000 1412014770","2a1fa14c7917753b3dcbad21eae3ace6"]},{"t37":["37","0.21787800 1412014770","46673993dd0acc4a87f0540ed2c54396"]},{"t38":["38","0.32824000 1412014770","95b99c0b527a8a20abdc771416f6dfa8"]},{"t39":["39","0.37690300 1412014770","e14d3c8183584870f7d484f61cc510a6"]},{"t40":["40","0.52323400 1412014770","4404f4d76a8aa521c8cfcdc5446ac6d1"]},{"t41":["41","0.61863500 1412014770","0e444bd47caa94d91c20fcef06d6bd7c"]},{"t42":["42","0.67442200 1412014770","9f3d6beb2e05098da8693c24e35eebee"]},{"t43":["43","0.76704400 1412014770","33e263d685971514e287bbe38a8d77dd"]},{"t44":["44","0.80701100 1412014770","fa07a3cbb712751b28542f5774611eff"]},{"t45":["45","0.87635300 1412014770","a2dfb79f1520b52abf21ba85decd319a"]},{"t46":["46","0.05031600 1412014771","1d14b3c999e3d7b7eff0f02339e516df"]},{"t47":["47","0.20483600 1412014771","f57572d6c4d5f08f5ef60f1dd7901953"]},{"t48":["48","0.47027600 1412014771","e35305dba19fcc817eacbfae5d42484d"]},{"t49":["49","0.59164500 1412014771","8552adcbb1949d6ab532ce16904bf5db"]},{"t50":["50","0.77131300 1412014771","731e652d6e66c45ffb746e779f4f71f9"]}]

Но всё равно ничего у клиента не происходит. Гляньте пожалуйста что на этот раз не так:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Ajax db</title>
    <link rel="stylesheet" href="style.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        var static_rows = parseInt(($(window).height() - 8) / (24 + 2) + 2);

        $.getJSON(
            "server.php",
            {
                static_rows: static_rows
            },
            onAjaxSuccess
        );

        function onAjaxSuccess(data) {
            $.each(data, function(key, rowData) {
                var cells = $('#' + key).find('td');

                $.each(rowData, function(index, value) {
                    cells.eq(index).html(value);
                });
            });


        }

        var current_rows=static_rows+1;
        $(document).ready(function () {
            var tempScrollTop = 0;
            var currentScrollTop = 0;
            $(window).scroll(function () {
                currentScrollTop = $(window).scrollTop();
                if (tempScrollTop < currentScrollTop) {
                    var new_rows = parseInt(($('body').scrollTop() - 8) / (24 + 2)) + 1;

                    $.getJSON(
                        "server.php",
                        {
                            current_rows: current_rows,
                            new_rows: new_rows
                        },
                        onAjaxSuccess1
                    );

                    function onAjaxSuccess1(data) {
                        console.log(data);
                        $.each(data, function(key, rowData) {
                            var cells = $('#' + key).find('td');

                            $.each(rowData, function(index, value) {
                                cells.eq(index).html(value);
                            });
                        });


                    }

                    current_rows = current_rows + new_rows;
                }
                tempScrollTop = currentScrollTop;
            });
        });
     </script>
</head>
<body>
<table>
    <tr><th>id</th><th>microtime(UNIX time)</th><th>md5</th></tr>
    <?php
    for ($i = 1; $i <= 1000; $i++) {
    ?><tr id="t<?=$i?>"><td></td><td></td><td></td></tr><?php }?>
</table>
</body>
</html>

[Евгений Петров]

Вы опять неверно формируете данные.
Нужно:

{
	"t1":["1","0.39578100 1412014767","755097411bb87"],
	"t2":["2","0.43935900 1412014767","2cab74f361f62"]
}

А у вас:

[
	{"t1":["1","0.39578100 1412014767","755097411bb87"]},
	{"t2":["2","0.43935900 1412014767","2cab74f361f62"]}
]

Понимаете разницу? Не миллион объектов в виде членов массива, а объект со свойствами.

[doublench21]

@Petroveg теперь понял. Но дело в том, что я не знаю объектов в PHP. До них я просто не дошёл. Как быть ? Можно обойтись без них ?

[Евгений Петров]

Ваша беда в плохом знание обеих сторон, и фронтенда, и бэкенда, в результате чего приходится подгонять обработчик под неверную структуру ответа. Вот примерно то, что будет её обрабатывать:

function onAjaxSuccess(data) {
	$.each(data, function (index, value) {
		var keys = Object.keys(value),
			rowData = value[keys[0]],
			cells = $('#' + keys[0]).find('td');

		$.each(rowData, function (_index, _value) {
			cells.eq(_index).html(_value);
		});
	});
}

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

[doublench21]

@Petroveg просто я решил строго освоить php, а лишь затем переходить на фронтенд. А это лишь очередное задание, которое заставило глянуть в сторону JS, который пока тёмный лес для меня.

[Евгений Петров]

Весьма странное решение. Впрочем, хозяин — барин.