Bonsai Project

Bonsai Project

Part 1: populating products list and using URL to pass data

Video Notes

Adding data to url parameter for page

http://localhost:8099/test/second?name=Tom&age=10

The above request is a get request so we can add data to the url: 'name=Tom&age=10'

Parameter	Value
name	"Tom"
age	10

How use data in url to pass information to another page

This is very useful as we can use it to pass data to another page.

For example you may want to do this: When a user clicks on a product, we go to the products detail page and display data for that product. But do not want to have to create a page for each product.

What we can do instead:

1. On product list page we redirect on a product button click

productOneBtnElement.onclick = function(e){
   let newUrl = "/product.html?id=1"
   document.location.href = newUrl;
}

or just using an a link in the html

<a href="/product.html?id=1">More info</a>

Notice our use of html query string '?id=1'. More info on query string

2. On the product.html page we need to get the query string from our url In the js page for it:

// our url is .../product.html?id=1

let searchParams = new URLSearchParams(window.location.search)
// searchParams.has('id') // We can do this to check if param exists
let param = searchParams.get('id') // returns string "1"

// We can now fetch the data with id 1 from the server using the fetch api or axios

Using js to automatically insert html

Note this is advanced: We would recommend instead of using js to create the elements you can copy and paste the html for the products and use js to update the name, price and the link to the product details page,

// html
...
<p id='product1-price'></p>
..

// js
document.getElementById('product1-price').innerhtml = product[0].price;
document.getElementById('product2-price').innerhtml = product[1].price;
....

The js dom api can be used to insert html. The important methods are 'document.createElement' 'appendChild' and 'innerHTML' property

// 1. Use document.createElement to create your new element
let newDiv = document.createElement('div')
// 2. You can use inner html too. Not as recommended
newDiv.innerHTML = "<p style='font-size:32px;'>My Test text</p>"
// 3. Now attach the html element where you want
document.body.appendChild(newDiv);

We could instead find an element and attach our new element as a child to it:

document.getElementById('generate-here').appendChild(newDiv);

Or use innerHTML

let generateHere = document.getElementById("generate-here");
generateHere.innerHTML = '<div class="someclass"><a href="www.example.com"><p>some text</p></a></div>';