Вывод результата функции в div
 

Добрый день!
Имею вот такой код

<script>
function callbackFunction(data) {
  const paramsContainer = document.querySelector('.map__params');
 
  paramsContainer.innerHTML = '';
 
  for (const key in data) {
    const param = document.createElement('div');
    const paramValue = document.createElement('span');
 
    param.className = 'map__params-item';
    param.textContent = `${key}: `;
 
    paramValue.textContent = typeof data[key] === 'object' ? JSON.stringify(data[key]) : data[key];
 
    param.appendChild(paramValue);
    paramsContainer.appendChild(param);
 
  }
 
}
  document.getElementById('paramValue').innerHTML = data[indexTo];
</script>
 
<div id="param"><span id="paramValue"></span></div>

Код должен выдавать ответ в следующем виде

При помощи document.getElementById('paramValue').innerHTML = data[indexTo]; пытаюсь вывести значение indexTo в div/span.

Но ничего не выводится, подскажите как решить задачу?

Попробуйте расположить ваш скрипт ниже дива по коду

А где элемент с классом map__params?
И что такое indexTo?
Где вызов функции callbackFunction?
Что такое data в
document.getElementById('paramValue').innerHTML = data[indexTo];

Вы в консоль то заглядываете? Просто что бы посмотреть ошибки.

Это не помогает..

И кстати
typeof null === 'object'

Вызов функции:

indexTo - это значение индекса из ответа.

Консоль ругается на Uncaught ReferenceError: data is not defined в строке document.getElementById('paramValue').innerHTML = data.indexTo;

Также ругается на
Cannot set properties of null (setting 'innerHTML') at Object.callbackFunction в строке paramsContainer.innerHTML = '';

Ну так indexTo должно быть где то описано и ему должно быть присвоено какое то значение. Где этот индекс считается?
data у вас определена как параметр функции. А вне функции никакой data нет.

const paramsContainer = document.querySelector('.map__params');
Если нет элемента с классом map__params, то paramsContainer будет null.

ЗЫ Так data.indexTo или data[indexTo] ?

в первом сообщении написал:
функция должна возвращать вот такой ответ, indexTo в нем

{
  "addressTo": "ул Советская",
  "areaTo": null,
  "boxSize": "m",
  "cashOfDelivery": 26400,
  "cityTo": "г Ростов-на-Дону",
  "deliveryDescription": {
    "description": "от 1 до 2 дней + обработка заказа 10 часов",
    "values": {
      "deliveryMax": 2,
      "deliveryMin": 1,
      "extraTimeInHours": 10
    }
  },
  "indexTo": "344019",
  "mailType": "POSTAL_PARCEL",
  "pvzType": "russian_post",
  "id": 44342,
  "regionTo": "обл Ростовская",
  "sumoc": "150000",
  "weight": "1000"
}

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

Все что я самостоятельно подписал в скрипте это:

document.getElementById('paramValue').innerHTML = data[indexTo];

Виджет установленный на сайте должен передавать в эту callback функцию ответ, который я прикрепил выше.. А я из этого ответа должен как то взять значения... Сам виджет работает, пункт выдачи выбирается.. Ошибок нет..

Ну не пишут data[indexTo], если indexTo не переменная, а имя свойства!

Но все равно, если нет элемента с классом map__params, то paramsContainer будет null!

И data вне функции должна быть как то определена!

Запутался уже...
виджет передает в функцию это

{
  "addressTo": "ул Советская",
  "areaTo": null,
  "boxSize": "m",
  "cashOfDelivery": 26400,
  "cityTo": "г Ростов-на-Дону",
  "deliveryDescription": {
    "description": "от 1 до 2 дней + обработка заказа 10 часов",
    "values": {
      "deliveryMax": 2,
      "deliveryMin": 1,
      "extraTimeInHours": 10
    }
  },
  "indexTo": "344019",
  "mailType": "POSTAL_PARCEL",
  "pvzType": "russian_post",
  "id": 44342,
  "regionTo": "обл Ростовская",
  "sumoc": "150000",
  "weight": "1000"
}

Т.е. это не результат выполнения функции, а то что эта функция получает при выборе пункта выдачи в виджете.

все должно быть определенно в самом коде виджета на стороне почты

function ecomStartWidget(t) {
  const e = document.createElement("iframe");
  e.setAttribute("allowtransparency", "true"), e.setAttribute("scroll", "false"), e.setAttribute("frameborder", "0"), e.setAttribute("width", "100%"), e.setAttribute("height", "100%"), e.setAttribute("id", "mapIframe"), e.src = "https://widget.pochta.ru/map/";
  const a = document.getElementById(t.containerId);
  !document.querySelector("#mapIframe") && a && a.appendChild(e);
  const n = a => {
    if (a.data && a.data.isMapLoad) try {
      e.contentWindow.postMessage({
        postData: {
          siteId: t && t.id,
          accountId: t && t.accountId,
          accountType: t && t.accountType,
          weight: t && t.weight,
          sumoc: t && t.sumoc,
          startZip: t && t.startZip,
          startAddress: t && t.start_location,
          url: window.location.href,
          dimensions: t && t.dimensions
        }
      }, "*")
    } catch (t) {
      window.removeEventListener("message", n)
    }
    a.data.pvzData && (t.callbackFunction ? t.callbackFunction(a.data.pvzData) : console.error("Ошибка вызова callback функции. Указанная функция не найдена."))
  };
  window.addEventListener("message", n)
}

function resetSelectedPlacemarkInEcomWidget() {
  const t = document.getElementById("mapIframe");
  t && t.contentWindow && t.contentWindow.postMessage({
    resetSelectedPlacemark: !0
  }, "*")
}

Где у вас в коде блок, в который должен выводиться ответ? Тот самый контейнер, который берется по
const paramsContainer = document.querySelector('.map__params');

Виджет передает это в функцию, как параметр data
А почему у вас
document.getElementById('paramValue').innerHTML = data[indexTo];
вне функции?
Вне функции никакой data не существует

я так понимаю тут

<div id="forpvzrp" style="display: none;">
<div id="ecom-widget" style="height: 500px;">
<script src="https://widget.pochta.ru/map/widget/widget.js" type="text/javascript"></script><script type="text/javascript">// <![CDATA[
    ecomStartWidget({
      id: 0000,
     callbackFunction: callbackFunction,
      containerId: 'ecom-widget'
    });
// ]]></script></div>

Переместил... но так тоже не отображается..

<script>
function callbackFunction(data) {
  const paramsContainer = document.querySelector('.map__params');

  paramsContainer.innerHTML = '';

  for (const key in data) {
    const param = document.createElement('div');
    const paramValue = document.createElement('span');
	
    param.className = 'map__params-item';
    param.textContent = `${key}: `;

    paramValue.textContent = typeof data[key] === 'object' ? JSON.stringify(data[key]) : data[key];

    param.appendChild(paramValue);
    paramsContainer.appendChild(param);
	


  }
  
 document.getElementById('paramValue').innerHTML = data.addressTo;
}

	
 
  
</script>

ТУТ нет элемента с классом map__params!
Вы вообще то знаете, что такое querySelector?

При выборе пункта выдачи в виджете консоль ругается на эту строку
paramsContainer.innerHTML = '';
TypeError: Cannot set properties of null (setting 'innerHTML')

Еще раз говоСами на русский перевести можете?
Еще раз говорю.
document.querySelector('.map__params') - ищет элемент с классом map__params.
Какой нибудь <div class="map__params">
Если его нет, то возвращается null

ОООО, спасибо огромное, вставил <div class="map__params"></div> и все заработало!!!