PLS PLS PLS explain what a prototype is

[maya90]

thank you Paul… yes of course… and of course with plain JS everything is more complicated…

http://mayacove.com/dev/json/users_online.html

	contentDiv = document.getElementById('content');
	content = prop + ': ' + userObj[prop] + '<br>';
	contentNode = document.createTextNode(content);
	contentDiv.appendChild(contentNode);

prints:

firstName: Ray<br>lastName: Villalobos<br>joined: January, 12, 2012

firstName: John<br>lastName: Jones<br>joined: April, 28, 2010

(instead of ‘<br>’ tried ‘\r’ but also doesn’t do line-breaks… oh brother…

;-o

thanks again for all your help, Paul… (still haven’t read your long post (#15) regarding obj’s… want to solve all these issues first, then get to that… man, this thread is getting so long…
I appreciate your help so much… thanks to your help and the help of others here @ Sitepoint I’ve learned so much about all this stuff in the past week…

[maya90]

oh my gosh… had to do…

	lineBr = document.createElement("br");

for that <br> element… lol…

(man, how jQuery spoils ya… )

so, to compare: jQuery, just one line of code required:

 $('#content').append(prop + ': ' + userObj[prop] + '<br>');  

plain JavaScript:

content = prop + ': ' + userObj[prop];
contentNode = document.createTextNode(content);
lineBr = document.createElement("br");
contentDiv.appendChild(contentNode);
contentDiv.appendChild(lineBr);

doing lists (or tables) must be a lot of fun with this approach…

(I actually have done this stuff with plain JavaScript, but not in a long time… need to brush up on old DOM techniques…

PS (edit): so how does jQuery parse “<br>” that it prints it like an HTML tag (it converts it to an HTML tag…) and plain JS can’t?
(because in plain JS this also doesn’t work… content = prop + ': ’ + userObj[prop] + ‘<br>’; )

[maya90]

i.e., why can jQuery handle a string like “<br”> and plain JS can’t?

[fretburner]

@maya90

i.e., why can jQuery handle a string like “<br”> and plain JS can’t?

I’ve taken your JS and replace all the jQuery DOM manipulation with native browser functions as per Paul’s suggestion, and it seems to work fine:

$.getJSON('json/users2.json', function(data) {
	  
    var usersArr = data.users;
    var length = data.users.length;
    
    for(var i = 0; i < length; i++) {
        var userObj = data.users[i];	//	each elem in this array is an obj
        for (var prop in userObj) {
            if( userObj.hasOwnProperty( prop ) ) {
                if (typeof userObj[prop] === 'string') {
                    document.querySelector('#content').innerHTML += (prop + " = " + userObj[prop] + '<br>');
                } else {
                    document.querySelector('#content').innerHTML += (prop + ': ');
                    var joinedObj = userObj[prop];
                    for (var propJoined in joinedObj) {
                        document.querySelector('#content').innerHTML += ('' + joinedObj[propJoined]);
                        if (propJoined != 'year') {
                            document.querySelector('#content').innerHTML += ', '; 
                        }
                    } 
                }
                
            }
        }
        document.querySelector('#content').innerHTML += '<br><br>';
    }
});

[Paul_Wilkins]

Ahh, and the $.getJSON can be changed to native JavaScript too, thanks to a tiny library called MicroAjax

<script type="text/javascript" src="microajax.js"></script>
<script type="text/javascript">
...
</script>

microAjax('json/users2.json', function(data) {

[maya90]

I know… I just wanted the challenge of doing everything with plain JS… but this code is great as there are things here about the use of innerHTML I didn’t k now…

such as:

1. they only work in this example if you do document.querySelector(‘Content’).innerHTML += ', '; and not if you do

$(‘Content’).innerHTML += ', ';

(???.. I’m still loading the core jQuery…)

2. had no idea you could do innerHTML += (as opposed to just innerHTML = )
   of course this is very useful…

3. had no idea you have to enclose value in ‘()’ ( but only if you’re printing a strings and vars… if you’re printing just a string this works fine…

.innerHTML += ', ';

just learned three new things about innerHTML… ;~))

thanks again, people… you folks are the best…

[Paul_Wilkins]

@maya90

3. had no idea you have to enclose value in ‘()’

Well you don’t have to, but what with all of those plusses and equal signs in the code, it helps to make it easier to understand what is going on, doesn’t it?

Compare:

document.querySelector('#content').innerHTML += prop + " = " + obj[prop] + '<br>';

with:

document.querySelector('#content').innerHTML += (prop + " = " + obj[prop] + '<br>');

It could though be even clearer what’s going on by assigning it to a variable:

var content = prop + " = " + obj[prop] + '<br>';
document.querySelector('#content').innerHTML += content;

All three do exactly the same job - what’s important with them is how clearly they communicate with you, the person dealing with the code, about their intent.

[maya90]

again, thank you so much, Paul…

yes of course assigning the content to a var would be the best in a real situation…

(“innerHTML” is kind of funky… it’s like a var and a method at the same time…

thanks again and enjoy the rest of your day…

[maya90]

[quote]had no idea you have to enclose value in ‘()’

Well you don’t have to, but what with all of those plusses and equal signs in the code, it helps to make it easier to understand what is going on, doesn’t it? [/quote]

yes, it is easier, of course, to enclose those composed strings in parens…
(I didn’t realize it was optional…)

so Paul,

why does only this work?

 document.querySelector('#content').innerHTML += (prop  + ': ' );  

and not this?

 $('#content').innerHTML += (prop  + ': ' );  

( document.querySelector??? not document.jquerySelector???

thank you again…

PS:
I discovered a very useful method…

 Object.keys(myObj); 

returns all keys in an object as an array… very cool…
(to do things like test if are you on last key-val pair… very useful…

[fretburner]

@maya90

why does only this work?

 document.querySelector('#content').innerHTML += (prop  + ': ' );  

and not this?

 $('#content').innerHTML += (prop  + ': ' );  

When you use jQuery to get elements from the DOM, it returns them wrapped in an object which provides all the jQuery methods you’re used to. It doesn’t give you direct access to properties like innerHTML, as it expects you to set that through its .html() method.

You could access the underlying node though, and set the innerHTML property, like this:

$('#content')[0].innerHTML += (prop  + ': ' );

[Paul_Wilkins]

@maya90

why does only this work?

As said, the $ object gives you a jQuery object. innerHTML is available only on actual element references.

jQuery does provide html methods though, which can be seen on their DOM insertion inside category, so you could do this instead:

$('#content').append(prop  + ': ' );

[fretburner]

Hey maya90,

I came across another resource over the weekend that I think you might find interesting: http://www.objectplayground.com/

There’s a video explaining, in some detail, how objects, prototypes and inheritance work in JS. There’s also a section at the bottom of the page where you can enter your own code and it will visualize the prototype chain for you.

[maya90]

thank you very much, fretburner…