Получить json с url-адреса и показать на странице html

Ниже приведен пример данных json, которые я взял со своего api на странице html,

[{
    "id": 1,
    "name": "rele",
    "location": "bedroom",
    "posts": [
        {
            "id": 2,
            "description": "hi"
        }
    ]
}]

Ниже приведен jquery,

<script type = "text/javascript" >
     $(document).ready(function() {

        $("#message").click(function(event){
           $.getJSON('http://localhost:8080/jpa/device', function(jd) {
              $('.tblForm #result').html('<p> ID: ' + jd.posts.id + '</p>');
              $('.tblForm #result').append('<p>Description : ' + jd.posts.description+ '</p>');

           });
        });

     });
  </script>

я мог получить значение name и location, но не posts.description.

Я получаю сообщение об ошибке: «Свойство или поле 'description' не найдено»

posts - это массив, поэтому вам нужно получить к нему доступ по индексу или пройти через него. попробуйте jd.posts[0].description, чтобы получить первый элемент массива
Rory McCrossan 10.08.2018 16:56
0
1
414
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

ваша переменная "posts" - это список, поэтому вам лучше выполнить цикл, заменив этот код:

$('.tblForm #result').append('<p>Description : ' + jd.posts.description+ '</p>');

По этому:

$.each(jd.posts, function(index, post){
    $('.tblForm #result').append('<p>Description : ' + post.description+'</p>');
});

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

posts не определен, и вы обычно используете $.each(array, function(i, post..., так как вы не работаете с элементами dom.
charlietfl 10.08.2018 17:56

Хорошо, тогда я меняю свой ответ, большое спасибо.

Julien Cochennec 11.08.2018 13:43

Другие вопросы по теме