FilesExpand file tree

 js-object

/

json_example.js

Copy path

Blame

More file actions

Blame

More file actions

Latest commit

 

History

History

History

39 lines (37 loc) · 1.07 KB

 js-object

/

json_example.js

Copy path

Top

File metadata and controls

• Code
• Blame

39 lines (37 loc) · 1.07 KB

Raw

Copy raw file

Download raw file

Open symbols panel

Edit and raw actions

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

const btn = document.querySelector('.btn');

const url = `./api/person.json`;

btn.addEventListener('click', () => {

getData(url);

});

function getData(url) {

// construct xhr

const xhr = new XMLHttpRequest();

// method open get/post/put, url

xhr.open('GET', url);

// untuk perubahan readyState

xhr.onreadystatechange = function () {

if (xhr.readyState === 4 && xhr.status === 200) {

// disini dia akan convert ke obj gunakan parse

const data = JSON.parse(xhr.responseText);

// get obj use map

const displayData = data

.map((item) => {

return `<p>${item.name} As ${item.job}</p>`;

})

.join(' ');

// buat element <div></div>

const element = document.createElement('div');

// isi element div dgn displayData

element.innerHTML = displayData;

// add to browser

document.body.appendChild(element);

} else {

console.log({

status: xhr.status,

response: xhr.responseText,

readyState: xhr.readyState,

});

}

};

xhr.send(); // for request to server

}