Tag: JavaScript

Why Node.js?

Hey Guys,

I decided to start a tutorial about node.js. I know sounds is boring because there are plenty tutorials outside which can help you to learn. but in this tutorial I want to start differently. I want to start developing a real application. but we start it slowly and I will try to post  a few times per day. before we start lets say why node.js ?

My answer to this questions is : because node.js is very cool. hahaha… but if you really want to know why node.js,  you can look at this web page, this is a really good explanation about node.js

Why node.js?

Any way, after you read Why Node.js, please do not waste your time to search about it. if you really want to know more about it, you only have one choice:

  1. Move your ass and work on it … hahahah

How we can install Node.Js?

Ok, this a first question that you may ask and it is right question. to install node.Js, Please click Node.Js  and click on the Green INSTALL button ( I hope you can see it there !!!!! 😉  ). Just follow the install instruction and install the Node.Js,

Note: if you do not know how to install this app please turn off your PC and do something else. because installing node.js is as easy as installing Adobe Acrobat Reader 5.5.

How can check whether the Node.Js is installed properly or not?

it is a good questions. to check Node.Js installed properly or not, please open command prompt and type node -v

In response you may get something like this :

Node Version Control

I think for now is enough, I will try to post new things :

Bye bye

Advertisement

How can retrieve data from Json source and show them on the page?

Maybe it is very difficult for you to connect to the Json file and retrieve data, today I want to make it easy for you 🙂 Lets start.

Follow these steps:

  1. We need a Json file for the source that produces Json data for us. To make a Json file please follow these steps :
    1. Make a new  text file and copy this information to the file
"one": "Singular sensation",

"two": "Beady little eyes",

"three": "Little birds pitch by my doorstep"
    1. Change the file extension to the Json
    2. Now you have Json file that contains data , please copy the file in your project ( I assumed you are working in Visual studio )
    3. There two types of instructions that you can follow to read a Json file , Today I want to use $.getJSON (This a JQuery function)
<script>

    $(document).ready(function () {

        $.getJSON("Data/info.Json.", function (data) {
        var items = [];
        $.each(data, function (key, val) {
            items.push("<li id='" + key + "'>" + val + "</li>");
        });

        $("<H1>", {
            "class": "my-new-list",
            html: items.join("")
        }).appendTo("body");
    });
    })

</script>

GetJSON hast two parameters

  • Source of JSON , it could be URL or the address of JSON file
  • The function that gets data from JSON source

        $.getJSON("Data/info.Json.", function (data) {

4.  Then we should add data to the array


        $.each(data, function (key, val) {
            items.push("<li id='" + key + "'>" + val + "</li>");
        });

</script>

5.  And in the last step we should add the HTLM codes that we generated in the previous step to the body tag.


        $("<H1>", {
            "class": "my-new-list",
            html: items.join("")
        }).appendTo("body");
    });

And do not forget to add JQuery reference to your code , it coule be like this :

<script src="~/Scripts/jquery-ui-1.8.20.js"></script>
<script src="~/Scripts/jquery-1.7.1.js"></script>