DEV Community: Tisha Tallman

Array Methods Used on an Array of Objects

Tisha Tallman — Fri, 09 Nov 2018 21:48:05 +0000

Array methods can be used on an array of objects with relative ease with one nuance – accounting for object properties. The solution is to utilize dot notation.

A simple array of objects is provided below as a demonstration.

The some() array method is used when you are trying to determine whether at least one of the items in the array passes a certain condition. The output will return ‘true’ or ‘false’. In the example below, the ‘some’ array method is checking to determine whether any of the array of objects has a guest with the age property of greater than 21 years.

The every() array method similarly checks to determine whether any item meets the established condition. In this case, the ‘every’ method is checking to determine whether ‘every’ one of the array of objects has a guest with an age property greater than 21 years. The output will return ‘true’ or ‘false’.

The find() array method simply finds the specified item and returns it. In the case below, it returns the entire object that includes the specified property.

In addition, the methods can be combined. The example below demonstrates the combination of the filter(), includes(), and map() methods. The filter() array method loops through the list to find the condition which it was passed, producing the new array with only the items that meet that condition. In the case below, the ‘filter’ method was combined with the ‘includes’ method, which normally would produce a ‘true’ or ‘false’ result, to ‘filter’ through the items, finding the ‘music’ property on each object. Then, a new array with the conditioned items are rendered with the ‘map’ method.

The forEach() array method is useful when you want to display the entire array, or, in this case, the array of objects. The method loops through every item, rendering the entire guest list.

A Basic Example on jQuery Events

Tisha Tallman — Tue, 06 Nov 2018 14:28:07 +0000

jQuery is a JavaScript library that is quite salient on event-driven responses to page elements, allowing users to interact with pages through text input. A simple example is easily demonstrated below.

First, build out a simple HTML page that allows for search, add, and delete functionality to an existing list of names. The list is hard coded as an array which, then, allows for array methods to be combined with the event methods. The HTML file is below:

Next, code a simple CSS file. The code below is the only necessary code that is later combined with the search button to provide a page color change. The color will change to blue after entering an existing name from the list and clicking search.

The list, called student list, is coded into the app.js file below.

Then, a render function is created to allow the list to render to the page below the input field.

The add, search and delete functions are added to the code using jQuery event method “on”, as seen below.

It is as simple as that. You can now add names to the existing list that will render to the page at the bottom of the existing list. You can delete names from the existing list and the new list will render to the page without the deleted name. Or, you can search for names on the existing list. After you input a name from the existing list and you click the search button, the body of the page will change to blue.

The page rendering of the student list prior to entering text or clicking any of the buttons is shown below. Some additional code was added to the CSS file for this simple style.

The page rendering is as follows after an existing list name is entered in the field and the search button is clicked.

Beginner's First Steps With APIs

Tisha Tallman — Thu, 01 Nov 2018 17:01:52 +0000

Third party application program interfaces, APIs, are a great tool for building software applications. An easy way to get familiar with the protocols used in making requests and receiving information is by choosing an API of personal interest and playing around with it. A simple search engine query yields a great starting point.

After choosing an API of interest, I set up a personal account and obtained an API key. I built out a simple html for the information to return to me in the browser.

Then, I created a variable for the API key and a variable for the query. The query includes the URL in which I wish to retrieve the information plus the API key. Insert the appropriate API key and URL where the “ “ are indicated.

I, next, coded an ajax ‘get’ method to retrieve the information.

The following is then sent to the browser.

After making this first step, I found it easier to understand APIs and I acquired a basic understanding of the power of utilizing third party APIs.

Beginner's Mistakes: Variables, Functions & Objects. . . Oh my!

Tisha Tallman — Thu, 30 Aug 2018 22:14:38 +0000

Beginner’s Mistakes: JavaScript’s Variables, Functions & Objects. . . Oh My!

JavaScript post-class four of coding bootcamp, I find my head a bit ‘dazed and confused’. . . a far cry from HTML’s elements, CSS’s selectors and properties, and, yes, even CSS grid. Instead, variables, functions, objects, properties, methods, events, conditions and loops are swimming around in my brain. So, I do what any normal noob would do, look for misery. . . I mean. . . company, googling “beginner common mistakes” in JavaScript . . . I find myself. Sigh. OK. Common mistakes are universal, save the random coding savant.

Among the most cited common mistakes, syntax issues seem to rank the highest. This includes: missing or mismatched brackets, parentheses, curly brackets, commas and semicolons; failure to camel case when naming variables; and naming variables with JavaScript reserved words . . . to name a few.

Another favorite of those new to JavaScript, is confusing assignments and comparisons. I can personally attest to this one. There is a difference between assignment “=” and comparison “==” (forgiving equality) and “===” (strict equality), and the difference is functioning code vs. a non-functioning code.

If you can relate to the mistakes that I have described, worry no more! I have provided some examples and charts below to assist in understanding how variables, functions and objects work at a fundamental level with some syntax highlights. Hope it helps! Keep calm and code on.