Как я могу отобразить данные из JSON на моей веб-странице?

Я пишу сценарий, который отправляет запрос ajax. Кажется, что облако отвечает JSON, но как я могу отобразить данные из JSON на моей веб-странице?

Здесь ссылка на хорошо напечатанный JSON.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
        <body>
            <button onclick="myFunctionPost()">Start</button>
            <script>
            function myFunctionPost() {
                jQuery.ajax( {
                    url: 'https://iotmmss0018275632trial.hanatrial.ondemand.com/com.sap.iotservices.mms/v1/api/http/app.svc/T_IOT_77877E443B666B7FED2F?$format=json',
                    type: 'POST',
                    crossDomain: true,
                    dataType: 'jsonp',
                    success: function( response ) {
                        console.log(response);
                    }, 
                    error : function(error) {
                        console.log(error);
                    }   
                } );
            }
            </script>
        </body>
</html>


javascript json jquery ajax pretty-print
person Aleksandar K.    schedule 10.10.2017    source источник
comment
Ответ будет десериализован в объект, поэтому вам просто нужно получить доступ к свойствам, чтобы заполнить любую нужную структуру HTML. На самом деле мы не можем предложить какой-либо конкретной помощи, так как ваш вопрос слишком общий и вы не показали HTML-код, который хотите создать, однако я бы предложил разбить цель на задачи и выполнить их поиск в Google, т. Е. 'как создать элемент в jQuery?', 'как выполнить цикл по массиву?' и т. д. Вам также помогут документы jQuery: api.jquery.com. Если у вас все еще есть конкретная проблема, задайте другой вопрос, подробно описав, чего вы пытаетесь достичь.   -  person Rory McCrossan    schedule 10.10.2017
comment
это зависит от ваших требований. Если данные поступают в виде строки, проанализируйте ее до объекта json, и вы можете получить все данные внутри своего json.   -  person Arunprasanth K V    schedule 10.10.2017

Ответы (2)


arrow_upward
0
arrow_downward

Для этого вы можете использовать аргумент JSON.stringify() пробел. Вам также нужно будет заключить вывод в <pre> </pre>, чтобы сохранить межстрочный интервал.

function myFunctionPost() {
  $.ajax( {
    url: 'https://jsonplaceholder.typicode.com/posts',
    type: 'GET',
    success: function(response) {
      $('#pp').html('<pre>' + JSON.stringify(response, undefined, 4) + '</pre>');
    }, 
    error: function(error) {
      console.log(error);
    }   
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
        <body>
            <button onclick="myFunctionPost()">Start</button>
            <p id="pp"></p>
            
        </body>
</html>

Источник: Есть ли в jQuery Объект JSON / javascript в HTML довольно функция печати, похожая на PHP var_dump?

person Andrzej Smyk    schedule 10.10.2017

arrow_upward
0
arrow_downward

Автор var responseObject = json.parse(response), чтобы создать объект javascript.

А потом делать то же, что и с JS-объектом? Трудно сказать точный код, не зная, что вы хотите отобразить, в каком HTML.

person DanteTheSmith    schedule 10.10.2017