Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Данные из json в html (https://javascript.ru/forum/misc/52430-dannye-iz-json-v-html.html)

jsnoob4ik 18.12.2014 21:11
Данные из json в html
 
Имеется:
{
  "items": [
    {
      "id": "01",
      "text": "TEXT",
      "likes": {
        "count": 1,
        "can_like": 1
      },
      "date": 0000,
      "comments": {
        "count": 1,
        "can_post": 1
      },
      "attachments": [
        {
          "type": "photo",
          "photo": {
            "photo_130": "http://1.jpg",
            "date": 0000,
            "id": 01
          }
        }
      ]
    },
    {
      "id": "02",
      "text": "TEXT2",
      "likes": {
        "count": 2,
        "can_like": 2
      },
      "date": 0000,
      "comments": {
        "count": 2,
        "can_post": 2
      },
      "attachments": [
        {
          "type": "photo",
          "photo": {
            "photo_130": "http://2.jpg",
            "date": 0000,
            "id": 02
          }
        },
        {
          "type": "photo",
          "photo": {
            "photo_130": "http://3.jpg",
            "date": 0000,
            "id": 03
          }
        },
        {
          "type": "photo",
          "photo": {
            "photo_130": "http://4.jpg",
            "date": 0000,
            "id": 04
          }
        }
      ]
    }
  ]
}


<div id="box"></div>

    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script>
    $.getJSON('test.json', function(data) {
        var output="<div>";        
        for (var i in data.items) {
            output+="<div>" + data.items[i].id + "</div>";
            output+="<div>" + data.items[i].text + "</div>";
            output+="<div>" + data.items[i].likes.count + "</div>";
            output+="<div>" + data.items[i].comments.count + "</div>";
            output+="<div>" + data.items[i].attachments[0].photo.photo_130 + "</div>";
          }
          output+="</div>";
        }
        document.getElementById("box").innerHTML=output;
    });
    </script>


На выходе получаю пустую страницу:cray:

рони 18.12.2014 21:18
jsnoob4ik,
15 строка

jsnoob4ik 18.12.2014 21:20
Исправил. Теперь так выглядит 
<div id="box"></div>

    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script>
    $.getJSON('test.json', function(data) {
        var output="<div>";        
        for (var i in data.items) {
            output+="<div>" + data.items[i].id + "</div>";
            output+="<div>" + data.items[i].text + "</div>";
            output+="<div>" + data.items[i].likes.count + "</div>";
            output+="<div>" + data.items[i].comments.count + "</div>";
            /*output+="<div>" + data.items[i].attachments[0].photo.photo_130 + "</div>";*/
          }
          output+="</div>";
        document.getElementById("box").innerHTML=output;
    });
    </script>

Все равно пустую страницу отдает.

рони 18.12.2014 21:27
jsnoob4ik,
а data есть?
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
</head>

<body>  <div id="box"></div>
<script>
var data = {
  "items": [
    {
      "id": "01",
      "text": "TEXT",
      "likes": {
        "count": 1,
        "can_like": 1
      },
      "date": 0000,
      "comments": {
        "count": 1,
        "can_post": 1
      },
      "attachments": [
        {
          "type": "photo",
          "photo": {
            "photo_130": "http://1.jpg",
            "date": 0000,
            "id": 01
          }
        }
      ]
    },
    {
      "id": "02",
      "text": "TEXT2",
      "likes": {
        "count": 2,
        "can_like": 2
      },
      "date": 0000,
      "comments": {
        "count": 2,
        "can_post": 2
      },
      "attachments": [
        {
          "type": "photo",
          "photo": {
            "photo_130": "http://2.jpg",
            "date": 0000,
            "id": 02
          }
        },
        {
          "type": "photo",
          "photo": {
            "photo_130": "http://3.jpg",
            "date": 0000,
            "id": 03
          }
        },
        {
          "type": "photo",
          "photo": {
            "photo_130": "http://4.jpg",
            "date": 0000,
            "id": 04
          }
        }
      ]
    }
  ]
}
var output="<div>";
        for (var i in data.items) {
            output+="<div>" + data.items[i].id + "</div>";
            output+="<div>" + data.items[i].text + "</div>";
            output+="<div>" + data.items[i].likes.count + "</div>";
            output+="<div>" + data.items[i].comments.count + "</div>";
           for (var k in data.items[i].attachments) output+="<div>" + data.items[i].attachments[k].photo.photo_130 + "</div>";
          }
          output+="</div>";

        document.getElementById("box").innerHTML=output;

</script>



</body>

</html>

jsnoob4ik 18.12.2014 21:34
json данные находятся в отдельном файле. test.json Проверил Ваш код, он отрабатывает, но не полноценно. Не выводятся Фото3, Фото4

рони 18.12.2014 22:24
Цитата:
Сообщение от jsnoob4ik
Не выводятся Фото3, Фото4
а вы их не выводите как они сами что-ли покажутся

рони 18.12.2014 22:29
jsnoob4ik,
добавил вывод строка 83

jsnoob4ik 18.12.2014 22:51
Спасибо, действительно работает (в том виде что Вы прислали). Но с подгрузкой из отдельного файла почему то не хочет работать. Не подскажите в чем проблема?

рони 18.12.2014 22:56
jsnoob4ik,
скорее всего сервер присылает не строку а обьект -- вам же виднее что приходит в дата

jsnoob4ik 18.12.2014 23:39
Все верно. Но как же сделать так, что бы он присылал строку а не объект?

рони 18.12.2014 23:48
jsnoob4ik,
сконвертируйте обьект в строку -- как это на php незнаю
а на js будет так 
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
</head>

<body>  <div id="box"></div>
<script>
var data = {
  "items": [
    {
      "id": "01",
      "text": "TEXT",
      "likes": {
        "count": 1,
        "can_like": 1
      },
      "date": 0000,
      "comments": {
        "count": 1,
        "can_post": 1
      },
      "attachments": [
        {
          "type": "photo",
          "photo": {
            "photo_130": "http://1.jpg",
            "date": 0000,
            "id": 01
          }
        }
      ]
    },
    {
      "id": "02",
      "text": "TEXT2",
      "likes": {
        "count": 2,
        "can_like": 2
      },
      "date": 0000,
      "comments": {
        "count": 2,
        "can_post": 2
      },
      "attachments": [
        {
          "type": "photo",
          "photo": {
            "photo_130": "http://2.jpg",
            "date": 0000,
            "id": 02
          }
        },
        {
          "type": "photo",
          "photo": {
            "photo_130": "http://3.jpg",
            "date": 0000,
            "id": 03
          }
        },
        {
          "type": "photo",
          "photo": {
            "photo_130": "http://4.jpg",
            "date": 0000,
            "id": 04
          }
        }
      ]
    }
  ]
}


document.getElementById("box").innerHTML=JSON.stringify(data);

</script>




</body>

</html>

jsnoob4ik 19.12.2014 00:09
Спасибо и за это, но я имел ввиду, как его перевести в строку, и вывести в html распарсив так, как Вы сделали это в прошлом комментарии. Везде просто примеры идут, где изначально всё(json js html) в одном файле.

рони 19.12.2014 01:13
jsnoob4ik,
моя твоя непонимай $.getJSON('test.json', запросили строку json вам её прислали сделали обьектом и отдали обьект в function(сюды дата и есть обьект) { что тут непонятного ???
сделайте строку в вашем файле -- скопируйте результат из 11 поста и в файл test.json и проверьте .

рони 19.12.2014 01:26
jsnoob4ik,
живой пример оттуда можно взять test.json
http://learn.javascript.ru/play/8H68Eb


Часовой пояс GMT +3, время: 08:30.