Как сделать запрос Json? [как делать разные запросы для разных кнопок?]

Вопрос-ответ JavaScript
1

Из кода что есть, нужно реализовать такую штуку. Допустим, у меня на странице написано несколько номеров накладных и есть кнопка рядом с ними.
По нажатию на кнопку через api новой почты узнать статус этого номера. (но что бы в запрос передавалось то значение которое написано на странице, а не как сейчас

	{
        "DocumentNumber": "20450118862059",
        "Phone":""
    },

)

API новой почты https://devcenter.novaposhta.ua/docs/services/556eef34a0fe4f02049c664e/operations/55702cbba0fe4f0cf4fc53ee

Мой код находиться тут

2

Нужно чтобы код обработчика события знал про айди посылки. Один из способов - хранить айди посылки в свойствах кнопки с помощью data-асстрибутов.

<div>
	<button class="status-btn" data-doc-id="20450118862059">
		Узнать
	</button>
</div>

<div>
	<button class="status-btn" data-doc-id="20450118862059">
		Узнать
	</button>
</div>

А в обработчике клика получать айдишник посылки и с ним уже идти в API. Код который выводит результат тоже должен знать куда его выводить. Т.е. нужно логически “связать” кнопку, айди посылки, узел куда выводится результат. Это можно сделать через объект, например. А можно (не самый гибкий способ) через узел кнопки

$('.status-btn').on('click', function (event) {
	var id = parseInt(event.target.dataset.docId)
	$.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": "caeb13b660b11432a9843510578b909a"
	    }),
	    success: function(response) {
	        var data = response.data;
	        data.forEach(function(item, i, arr) {
	            $(event.target.parentNode).append(item.Status);
	        });
	    },
	})
})

Это демонстрация, не готовое решение. Тебе нужно подумать как сделать поведение более user-friendly.

3

Спасибо Большое)
Есть еще такой вопрос
Как сделать что бы другая кнопка “Узнать все” выводила все номера накладных с статусами рядом
Вот такого плана
image

4

Рядом с этой кнопкой “узнать все” или рядом с каждой кнопкой, которую можно нажать отдельно?

5

ниже кнопки “узнать все” вывести все номера (которые имеются на странице) со статусами

6

А что не понятно в этой задаче? Потому что код из самого топика то что описано

7

Небольшая заминочка, как вывести статусы рядом с номерами по нажатию на кнопку “Узнать все”

photo_2019-03-06_15-32-23

8

Получается кнопка “узнать все” должна зать про все возможные документы. Общую стратегию нужно менять. Я бы генерировал список кнопок из 1 структуры данных, классы для узлов генерировал из айдишников документов, а потом из ответа, имея айдишник, можно найти соответствующий узел куда вставлять статус. И это лучше потому что будет 1 запрос чтобы проверить статус всех посылок.

var documents = [{
docNumber: 111
}, {
docNumber: 222
}, {
docNumber: 333
}]

// цикл, который сгенерирует узлы

// при генерации навесить обработчик на кнопку, использовать docNumber

// и кнопку “проверить все”

// Сделать запрос сразу со всеми данными из documents, а результаты растусовать в элементы с классами doc-DocumentId

9

А, если допустим у меня чисто на отдельной странице только список номеров и одна кнопка (Узнать все), такая стратегия разве подойдет?
image

10

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

11

Можешь показать промежуточный вариант кода, я скажу верное ли направление. Сам писать решение не буду.

12

Что такое узел?

13

Я имею в виду DOM node