DEV Community

Cover image for Website lesson 8: imitating js communication
Yuri Filatov
Yuri Filatov

Posted on • Originally published at andersenlab.com

Website lesson 8: imitating js communication

Welcome back!
If you are new to js, I really advise you to check all my article about js, starting from "communication base"

Summing up

Get post function

Every user should have a function called output all data or if it is an online shop, you already start from showing everything you have with no filters.

 getPost(id) {
        for (var i = 0; i < posts.length; i++) {
            if (posts[i].id === id) {
                return posts[i];
            }
        }
        throw "No object with " + id + " id";
    }
Enter fullscreen mode Exit fullscreen mode

What do we send?

As always we send some information from outside. If we want to show a specific object we need some kind of filter - id.
Then our algorithm says that we have to find this object by checking id equal and we return this object as the result, if true, or we throw a message, if false.

Get post by filter

Firstly, we show everything we have. Imagine, we have an online shop for clothes: you don't need every type of clothes, but you are looking for a dress, for example. Then we need a filter to show specific objects.

 getPosts(filterConfig = "Date", skip = 0, top = posts.length) {
            if (filterConfig == "Date") {
                posts.sort(function (a, b) {
                    return new Date(b.createdAt) - new Date(a.createdAt);
                });
                return this.posts.slice(skip, top + skip);
            }
            else if (filterConfig == "summer") {
                var temp = []
                posts.forEach((product, ind) => {
                    if (product.tag == "summer"){
                        temp.push(product)
                    }
                });
                return temp
            }
            else if (filterConfig == "spring") {
                var temp = []
                posts.forEach((product, ind) => {
                    if (product.tag == "spring"){
                        temp.push(product)
                    }
                });
                return temp
            }
            else {
                throw "Error. there is no such filter";
            }
        }
Enter fullscreen mode Exit fullscreen mode

We assign skip as the start position. If the user doesn't change it, we show everything that suits our filter.
Top - the amount of posts to show, that default is the length of our database (everything).

Algorithm

  • We check, which filter was enterd by user.
  • We find objects that are equal to a filter.
  • We return a mass of suitable objects.

Adding all

In the previous lesson we talked about adding a post (one), but we can make a function for adding many objects (a mass of objects).

addPost(Object){
       if(this.validatePost(Object)){
           posts.splice(posts.length,0,Object);
           return true;
       }
       else {
           return false;
       }
    }
Enter fullscreen mode Exit fullscreen mode

Again we send some info from the user - a mass.

Edit post

If we realize not only the user, but also the admin, we should have this opportunity for admin.

editPost(id,post){
        if(this.validatePost(post)){
            this.getPost(id).destination=post.destination;
            this.getPost(id).author=post.author;
            return true;
        }else {
            return false;
        }
    }
Enter fullscreen mode Exit fullscreen mode

What do we send?

We send a filter - id, then to find the right object to edit and we send an object to replace the old one.

Algorithm

  • We find the right object, by checking id equal.
  • We check the information of object we want to replace for correction.
  • We change our information using our object we sent to.
  • As always the result is true or false.

Imitating communication

Let's check, if our functions work correctly by outputting some messages:

console.log("testing getPost: ")
console.log(a.getPost(3))

console.log("test removePost: ")
console.log(a.removePost("2"))

console.log("output all posts: ")
console.log(a.getPosts("Date"))

console.log(a.getPosts('spring'))
console.log(a.getPosts('summer'))
Enter fullscreen mode Exit fullscreen mode

I guess, here is everything understandable as we already talked about it.

By the way, I'd like to share my js code with you. You have to understand that it is not full, cause we have just imitated communication. The next lesson will be dedicated to real communication with the user: connecting html and js.

More info you can find on my website.
Good luck with your job!

Top comments (0)