Как перевести jQuery в чистый JS?

Question

[mraser]

Помогите пожалуйста переписать с jQuery на чистый JS и с помощью метода fetch().
У меня просто не хватает знаний и опыта сделать это самостоятельно.

Вот сам код

<div class="number-all">20450121585533</div>
  <div class="number-all">20450121587918</div>
	<button class="allstatus-btn">
		Узнать Все
	</button>

$('.allstatus-btn').on('click', function (event) {
  
$.each($(' .number-all'), function (index, value) { 
  	var id = $(value).text(),
        $this = $(this);
    
  $.ajax({
      type: "POST",
      dataType: "json",
      url: "https://api.novaposhta.ua/v2.0/json/",
      data: JSON.stringify({
          "modelName": "TrackingDocument",
          "calledMethod": "getStatusDocuments",
          "methodProperties": {
              "Documents": [
                  {
                      "DocumentNumber": id,
                      "Phone": ""
                  }]
          },
          "apiKey": ""
      }),
      success: function(response) {
          var data = response.data;
          data.forEach(function(item, i, arr) {
              $this.append(item.Status);
          });
      },
  })
  console.log($(value).text()); 
});

})

Comments

[Егор Живагин]

В помощь - youmightnotneedjquery/

[Владимир Коротенко]

А чем плох jquery?
Конкретно для вас?
И почему не воспользуетесь например vue + axios ?

Answer 1

[0xD34F]

А зачем делать отдельные запросы для каждого элемента? Достаточно одного общего - свойство Documents, оно же массив, можно сразу всё передать.

document.querySelector('.allstatus-btn').addEventListener('click', () => {
  const items = Object.fromEntries(Array.from(
    document.querySelectorAll('.number-all'),
    n => [ n.innerText, n ]
  ));

  fetch('https://api.novaposhta.ua/v2.0/json/', {
    method: 'POST',
    body: JSON.stringify({
      modelName: 'TrackingDocument',
      calledMethod: 'getStatusDocuments',
      methodProperties: {
        Documents: Object.keys(items).map(n => ({
          DocumentNumber: n,
          Phone: '',
        })),
      },
      apiKey: '',
    }),
  })
    .then(r => r.json())
    .then(r => r.data.forEach(n => items[n.Number].innerHTML += n.Status));
});

Answer 2

[Пашенька]

Пробуй(те).

var button = document.getElementsByClassName('allstatus-btn')[0], // предположим, что он единственный
    numbersAll = document.getElementsByClassName('number-all');

button.onclick = function (event) {
    for (var i = 0; i < numbersAll.length; i++) {
        (function (i) {
            var _this = numbersAll[i],
                id = _this.textContent;

            fetch(
                    'https://api.novaposhta.ua/v2.0/json/', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            "modelName": "TrackingDocument",
                            "calledMethod": "getStatusDocuments",
                            "methodProperties": {
                                "Documents": [{
                                    "DocumentNumber": id,
                                    "Phone": ""
                                }]
                            },
                            "apiKey": ""
                        })
                    }
                )
                .then(response => response.json())
                .then(result => {
                    console.log(result)
                    result.data.forEach(function (item, i, arr) {
                        _this.insertAdjacentHTML('beforeend', item.Status);
                    });
                })
        })(i);

    }
}

ПыСы: рано ещё для фетчь