jsfiddle.net codes in Notepad++

Question

I have already some codes which I can oparete on fiddle.net. But when I tried that codes in notepad++ I could not oparete.

What reasons for this situation may simply be? For example, I changed url link because of my domain. On fiddle.net I have jquery library but on Notepad++ I do not and I downloaded a .js file to my computer. Antoher problem could be my array on notepad++ which taken from fiddele.net but can not paste to notepad++ in line ,right place.

<html xmlns="http://www.w3.org/1999/xhtml">
<head> 

<script type="text/javascript" src="C:\Users\ftec805\Desktop\Deneme10\js\jquery-3.1.1.js"></script>
<script>
    //$.getJSON("new4.json", function(data) {
   // console.log(data);

    //$.getJSON('new4.json', function(data) {
    $.each(data.person, function(i, person) {
        var tblRow = "<tr><td>" + person.firstName + "</td><td>" + person.lastName + "</td><td>" + person['Email Address'] + "</td><td>" + person.City + "</td></tr>"
        $(tblRow).appendTo("#userdata tbody");
    });
    //});

    var data = {
    "person": [{
        "firstName": "Clark",
        "lastName": "Kent",
        "Email Address": "Reporter",
        "City": 20
    }, {
        "firstName": "Bruce",
        "lastName": "Wayne",
        "Email Address": "Playboy",
        "City": 30
    }, {
        "firstName": "Peter",
        "lastName": "Parker",
        "Email Address": "Photographer",
        "City": 40
         }, {
        "firstName": "Bruce",
        "lastName": "Wayne",
        "Email Address": "Playboy",
        "City": 30
    }]
} 
</script>
</head>
<body>
<div class="wrapper">
    <div class="profile">
        <table id="userdata" border="2">
            <thead>
                <th>FirstName</th>
                <th>LastName</th>
                <th>EmailAddress</th>
                <th>City</th>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>
</body>
</html>

On fiddle.net!

what error you care getting in console? is the jquery script loaded properly? — guradio, Mar 21 '17 at 06:24
There is not a Error on console, I couldn't see any information and added picture to my question — Mustafa Coskun, Mar 21 '17 at 06:28

score 0 · Accepted Answer · edited May 23 '17 at 11:46

put your <script> //data JSON bla bla and appending tbody code </script> after your <table>. you can put it in the bottom before </body> as well.

deep explanation is here

example:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head> 

    <script type="text/javascript" src="C:\Users\ftec805\Desktop\Deneme10\js\jquery-3.1.1.js"></script>
    </head>
    <body>

    <div class="wrapper">
        <div class="profile">
            <table id="userdata" border="2">
                <thead>
                    <th>FirstName</th>
                    <th>LastName</th>
                    <th>EmailAddress</th>
                    <th>City</th>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>

    <script>
        var data = {
        "person": [{
            "firstName": "Clark",
            "lastName": "Kent",
            "Email Address": "Reporter",
            "City": 20
        }, {
            "firstName": "Bruce",
            "lastName": "Wayne",
            "Email Address": "Playboy",
            "City": 30
        }, {
            "firstName": "Peter",
            "lastName": "Parker",
            "Email Address": "Photographer",
            "City": 40
             }, {
            "firstName": "Bruce",
            "lastName": "Wayne",
            "Email Address": "Playboy",
            "City": 30
        }]
    } 
    //$.getJSON("new4.json", function(data) {
    // console.log(data);

    //$.getJSON('new4.json', function(data) {
        $.each(data.person, function(i, person) {
            var tblRow = "<tr><td>" + person.firstName + "</td><td>" + person.lastName + "</td><td>" + person['Email Address'] + "</td><td>" + person.City + "</td></tr>"
            $(tblRow).appendTo("#userdata tbody");
        });
        //});
    </script>
    </body>
    </html>

anyway, I recommend to put the script on another file then use <script type="text/javascript" src="your/path/to/js/myScript.js"></script>to organize your html and your js.

example:

index.html

        <html xmlns="http://www.w3.org/1999/xhtml">
    <head> 

    <script type="text/javascript" src="C:\Users\ftec805\Desktop\Deneme10\js\jquery-3.1.1.js"></script>
    </head>
    <body>

    <div class="wrapper">
        <div class="profile">
            <table id="userdata" border="2">
                <thead>
                    <th>FirstName</th>
                    <th>LastName</th>
                    <th>EmailAddress</th>
                    <th>City</th>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>

    <script src="js/myScript.js"></script>
    </body>
    </html>

myScript.js (in js folder)

        var data = {
        "person": [{
            "firstName": "Clark",
            "lastName": "Kent",
            "Email Address": "Reporter",
            "City": 20
        }, {
            "firstName": "Bruce",
            "lastName": "Wayne",
            "Email Address": "Playboy",
            "City": 30
        }, {
            "firstName": "Peter",
            "lastName": "Parker",
            "Email Address": "Photographer",
            "City": 40
             }, {
            "firstName": "Bruce",
            "lastName": "Wayne",
            "Email Address": "Playboy",
            "City": 30
        }]
    }

    $.each(data.person, function(i, person) {
                var tblRow = "<tr><td>" + person.firstName + "</td><td>" + person.lastName + "</td><td>" + person['Email Address'] + "</td><td>" + person.City + "</td></tr>"
                $(tblRow).appendTo("#userdata tbody");
            });

Hope it helps

P.S. I suggest to use Atom, Sublime Text 3, or Vim or else for text editor. It makes our life easier to code ;)

That is great. Thank you for your explanation! @AimeTPGM – Mustafa Coskun Mar 21 '17 at 07:33 — Mustafa Coskun, Mar 21 '17 at 07:33

jsfiddle.net codes in Notepad++

1 Answers1