Day06 of #100DaysOfCode

#100DaysOfCode

Hii folks 🙌

Today I have completed the 6th video of JavaScript30!

Project 06: Ajax Type Ahead

Source: https://javascript30.com

Learnings:

The first thing I learned was fetch() method, which is an experimental method that can replace ajax request. Not saying fetch() is perfect — first of all, it is still unstable, and second of all, it doesn’t look nearly as sleek as jQuery’s $.ajax()

fetch(endpoint) // returns a promise  
.then(res => res.json()) // also returns a promise  
.then(data => data); // return an array of objects

fetch() takes one argument which is the endpoint’s URL. This returns a promise which several method that you can use to process the data. For this example, we used .json() which also returns a promise (I know) so we need to use .then() it once again. Now we finally have our data! This looks a little funky but I still consider it the nicer (optically at least) version for XMLHttpRequest than the old-fashioned.

If you want to create a regular expression that changed depending on a variable value you can do it very simply like this:

const regex = new RegExp(variableName, 'gi');

There was one more regex that just blew my mind and I don’t think I’d be able to write it on my own anytime soon. It took a number and added , after every three digits (converted 1000000 to 1,000,000):

x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');  

Now, this following function will do the trick on the frontend and matches all the city and state name as per user input

function displayMatches() {
  const matchArray = findMatches(this.value, cities);
  const html = matchArray.map(place => {
    const regex = new RegExp(this.value, 'gi');
    const cityName = place.city.replace(regex, `<span class="hl">${this.value}</span>`);
    const stateName = place.state.replace(regex, `<span class="hl">${this.value}</span>`);
    return `
      <li>
        <span class="name">${cityName}, ${stateName}</span>
        <span class="population">${numberWithCommas(place.population)}</span>
      </li>
    `;
  }).join('');
  suggestions.innerHTML = html;
}

This is was all for the JS30 project!

Following this up I did set up my frontend for my web app using ReactJS and I found a tough time doing ReactJs, It was always the case with me when I try to do the ReactJS. Hope I overcome this!!

That is all for Day06 ✅

Thanks for reading, See you tomorrow!