Как вывести JSON-ответ в html?

Question

[Fevralskiy]

Здравствуйте!

Есть html страничка с формой, которая отправляет при помощи аякс-запроса (GET) данные на сторонний ресурс и получает JSON-ответ. Вопрос в том как из ответа выцепить 2 параметра и вывести их в div под вышеуказанной формой?

Вот мой запрос:

$(document).ready(function(){
$('#cdek').on('submit',e => {
e.preventDefault(); // не даст сработать стандартному действию браузера при отправке формы, вместо этого еще можно "return false;" но в конце этого блока с кодом
    $.ajax({
        type: 'GET',
        url: 'https://kit.cdek-calc.ru/api/', // куда уходят данные с формы
        data: $('#cdek').serialize(), // сериализуем данные с формы
        success: function(data){

          }
      });
  });
});

А ответ выглядит так:

{
	
	"136":
	{
		"info":
		{
			"id":"136",
			"name":"Посылка склад-склад",
			"description":"До 30 кг. Услуга экономичной доставки товаров по России для компаний, осуществляющих дистанционную торговлю.",
			"im":1
		},
		"result":
		{
			"price":"165.00",
			"insurance_price":"7.50",
			"pod":"0.00",
			"total_price":"172.50",
			"day_min":2,
			"day_max":3,
			"date_min":"2017-08-09",
			"date_max":"2017-08-10"
		}
	}
}

Прикрепил картинку:


Как в div id="answer" вывести ("name":"Посылка склад-склад",) и ("total_price":"172.50",)?

Возможно ли вывод сделать универсальным т.к. ответ может быть и с другим тарифом? Например:

{
	"1":
	{
		"info":
		{
			"id":"1",
			"name":"Экспресс лайт дверь-дверь",
			"description":"До 30 кг. Классическая экспресс-доставка по России документов и грузов.",
			"im":0
		},
		"result":
		{
			"price":"670.00",
			"insurance_price":"0.00",
			"pod":"0.00",
			"total_price":"670.00",
			"day_min":2,
			"day_max":2,
			"date_min":"2017-08-09",
			"date_max":"2017-08-09"
		}
	}
	
}

Comments

[Виктор Л]

Answer 1

[Дмитрий Дерепко]

Это вставить в колбек аякса

success: (response)=>{
    const keys = Object.keys(response);
    const data = response[keys[0]];
    const info = data.info;
    const name = info.name;
    $("#divId").html('<p>name: ' + name + '</p>');
}