How to get and display data from xhr object

Get Help General Programming
#1

After doing the requests track in javascript, I decided to practice what I learned. I am using a xhr GET and want to display the data to the html. I console.log(xhr.response) and on the console it shows an object array called employee with 10 people. In each index, there is a name, age, job.

console.log(xhr.response);
//prints this
Object:
employee: Array(10)
0: {name: ‘John’, age: ‘27’, job: ‘IT’}
1: {name: ‘Bob’, age: ‘35’, job: ‘Teacher’}
…

What I want to do is add for example the first index to the html with the name and job in one line and the age in a new line. How do I do this?

#2

Depends on how much you want to do. There is a lot of abstractions/libraries/frameworks available to simplify this process. If you want to do it right and from scratch. You would need the following methods:

Document.createElement() - Web APIs | MDN
Node.appendChild() - Web APIs | MDN
Node.textContent - Web APIs | MDN

you should create an element for item in the response array, then within this element you might want to create child elements (for example a paragraph to get things on a new line). and textContent to set the text of the element

Ideally, you want to minimize interaction with the DOM. so you want to create the whole thing in JavaScript and then put al items on the page in one go

if you need further help, could you please make a codepen/jsbin/jsfiddle with the JSON data (without the request preferable) and how far you have come with creating elements

edit: maybe I should have asked this at the beginning, but do you have experience with JS and DOM interacting with each other?

#3

how do I select specific values from the object tho? If I want to get the job of index 0, would it just be xhr.response[0].job?

#4

that is possible, but could also use a loop.