JavaScript Problems— IFrames and Arrays
By: John Au-Yeung
Tags: Web Development, Technology, Software Development, Programming, JavaScript

Photo by Jonathan Borba on Unsplash

Like any kind of apps, there are difficult issues to solve when we write JavaScript apps.

In this article, we’ll look at some solutions to common JavaScript problems.

Encode to a Base64 String

We can use the btoa and atob to convert to and from a base64 string.

btoa accepts a binary string and returns a base64 representation of what we pass in.

atob takes a base64 string and returns a binary string with the decoded data.

Find the Sum of an Array of Numbers

We can find the sum of an array of numbers in a few ways.

A short way to find the sum, it to use the reduce method.

For instance, we can write:

[1, 2, 3, 4].reduce((a, b) => a + b, 0)

0 is the initial value. a is total so far, b is the item being added to a .

The initial value is optional and will be set to 0 if omitted.

“Cross-origin requests are only supported for HTTP.” Error When Loading a Local File

We can load the file from a web server instead of a file.

For instance, we can use the http-server to serve a file.

To install it, we run:

npm install -g http-server

Then we go to the folder and run:

http-server -c-1

Get Javascript Object from an Array of Objects by the Value of Property

We can use the find or filter function to find an object with the given property value without using loops.

find returns the first instance of a value in the array with the given condition.

filter returns an array with all the items with the given condition.

For instance, if we have the following array:

const arr = [

{a: 1, b: 2},

{a: 5, b: 3},

{a: 6, b: 4},

{a: 1, b: 5}

];

We can write:

const result = arr.filter(obj => {

return obj.b === 3;

})

to get an array with all the entries that have property b equal to 3.

Likewise, to use find , we can write:

const result = arr.find(obj => {

return obj.b === 3;

})

Then we get the first object in arr that has the property b equal to 3.

Difference Between call, bind, and apply

There are differences between call , bind , and apply .

They are all methods that are part of a function object, but they do different things.

call calls a function with the value of this we want and takes a comma-separated list of arguments.

For instance, if we have:

function greet(greeting){

console.log(`${greeting}, ${this.name}`);

}

Then we call it with call with our own value of this buy writing:

greet.call({ name: 'james' }, 'hi');

Then we get 'hi, james' logged.

apply is similar to call , but we pass in the arguments into the function with an array.

For instance, we can write:

greet.apply({ name: 'james' }, ['hi']);

to do the same thing.

call and apply both value the value of this as the first argument and either a list of an array of arguments as the 2nd.

bind is different from the other 2 since it returns a function with the value of this we pass into the argument.

For example, we can write:

const greetJames = greet.bind({ name: 'james' });

bind returns a new function with the value of this that we passed into it.

So we can call greetJames with the same arguments as before:

greetJames('hi');

and we get 'hi james' in the console log.

Access the Contents of an iframe

We can access the contents of an iframe with the contents jQuery method.

For instance, we can write:

$(document).ready(() => {

$('#frame').load(() => {

const frameBody = $('#frame').contents().find('body')

//...

});

});

We called the contents method and called find on the returned iframe to get the body of it.

Then we can do what we want with it.

Photo by John Doyle on Unsplash

Conclusion

Javascript arrays have many useful methods. One of them is the reduce method to combine entries in the way we want.

The standard library has functions to convert between base64 and binary strings and back.