SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 33
  1. #1
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    820
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    PLS PLS PLS explain what a prototype is...

    I thought a prototype was a sort of "proto" object or something, but it turns out it's just a property?

    I'm confused.. why is inheritance such a big deal with JS? (how does inheritance in JS differ from inheritance in Java?)
    (I know all JS objects inherit from a sort of primal, "mother" Object... I used to think this "mother" object was the same as a prototype.. now of course I'm realizing I'm wrong...;-)

    the reason am looking at this now is that I've been learning a lot of JSON lately (and thanks to help from fellow developers right here on SP I have learned a lot, and am finally comfy with JSON -- yay!)

    but I still have "lose ends".....;-)

    such as: how do you list the KEYS of an object in plain Javascript?

    in jQuery it's so simple, as you pass both the key and the value to the $.each() method; in plain, in this loop...

    Code:
     for (var i in data.users)
    what exactly is "i"?? just the index of the kay-value pair, right?

    something like

    Code:
     data.users[i].firstName
    prints the value of the key "firstName", but how do I print the KEY?

    I've been reading up on this here...
    http://stackoverflow.com/questions/2...ascript-object
    (hence my q's about prototypes...


    I frankly don't get any of the examples, tried a few, none worked..

    I'm printing values thus:

    Code:
      
    for (var i in data.users) {
         output+="<li>" + data.users[i].firstName + " " + data.users[i].lastName + " -- " + data.users[i].joined.month+"</li>";
         }
    so how do I do something like

    Code:
      
    for (var i in data.users) {
         output+="<li>" + data.users[i].KEY"</li>";
         }
    ???

    I can't believe how hard this is compared to the beauty of the jQuery $.each() method.....:-o

    meaning:

    Code:
    $.each(val, function(propName,propValue) {	
    	divLeft.append(propName + '<br>');
    });
    and voila!! no fuss no muss.....;-)

    thank you... HAPPY FOURTH OF JULY.....

    thank you....

  2. #2
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,411
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by maya90 View Post
    such as: how do you list the KEYS of an object in plain Javascript?

    in jQuery it's so simple, as you pass both the key and the value to the $.each() method; in plain, in this loop...

    Code:
     for (var i in data.users)
    what exactly is "i"?? just the index of the kay-value pair, right?

    something like

    Code:
     data.users[i].firstName
    prints the value of the key "firstName", but how do I print the KEY?
    The for..in construct is for looping over all the properties of an object. For each property of the object, the property name (or key, if you prefer) is assigned to the variable you supply (prop, in the example below). You can use this to access the property's value using the array syntax: object[key]. Here's an example:
    Code JavaScript:
    var myObj = {
        name: "Steve Jobs",
        company: "Apple",
        email: "sjobs@apple.com"
    }
     
    for (var prop in myObj) {
        if( myObj.hasOwnProperty( prop ) ) {
            console.log(prop + " = " + myObj[prop]);
        } 
    }

    this would output:
    Code:
    name = Steve Jobs
    company = Apple
    email = sjobs@apple.com
    The hasOwnProperty check ensures that we're only iterating the properties of the object and not the object's prototype.

    Quote Originally Posted by maya90 View Post
    I'm confused.. why is inheritance such a big deal with JS? (how does inheritance in JS differ from inheritance in Java?)
    (I know all JS objects inherit from a sort of primal, "mother" Object... I used to think this "mother" object was the same as a prototype.. now of course I'm realizing I'm wrong...;-)
    In Java (as in PHP) you create a class as a 'template' for creating new objects, and your classes can inherit from other classes. JavaScript doesn't have the concept of a class. If you want ObjectB to inherit methods and properties from ObjectA, you have to set Object A as the prototype for ObjectB.

    Here's an example:
    Code JavaScript:
    var Employee = function(name) {
        this.name = name;
     
        this.getName = function () {
            return this.name;
        }
     
        return this;
    };
     
    var Manager = function(name, department) {
        Employee.apply(this, arguments);
     
        this.department = department;
     
        this.getDepartment = function () {
            return this.department;
        }
     
        return this;
    };
     
    Manager.prototype = new Employee();
     
    var dave = new Manager('Dave', 'Frozen Goods');
     
    console.log(dave.getName() + ' manages ' + dave.getDepartment);
    // Outputs: Dave manages Frozen Goods

    Edit: When you try to access a method or property on an object, if it can't be found then JavaScript looks at the object's prototype to see if it can find them there, and so on and so on, back up the prototype-chain.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by fretburner View Post
    In Java (as in PHP) you create a class as a 'template' for creating new objects, and your classes can inherit from other classes. JavaScript doesn't have the concept of a class. If you want ObjectB to inherit methods and properties from ObjectA, you have to set Object A as the prototype for ObjectB.
    Something that's helpful to note is that prototypical structures can simulate what classes do, but not the other way around. Classes can't do what prototyping does, so prototyping is more flexible than classes.

    Basically all object contain a prototype and a constructor. The prototype is a set of properties (you could call them default values) that exist on those created objects, and the constructor is a function that runs when a new object is created. Also, each object has a hidden reference to a parent prototype, which is what you alluded to earlier.

    I find though that an image can help to replace a thousand words. The following guide on JavaScript object is a must-read, with good information and diagrams helping to explain what prototypes are.
    http://mckoss.com/jscript/object.htm
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    820
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Code:
    Manager.prototype = new Employee();
    ?????

    oh my gosh, I have never seen this (until today, when I saw in some of the S.O. urls I looked at...)

    wouldn't something like

    Code:
    Manager = new Employee()
    ???

    make "Manager" inherit from Employee?


    like in this example...

    Code:
    function Employee() {
    	this.dept = "HR";
    	this.manager = "John Johnson";
    }
    
    var Jon = new Employee();
         console.log(Jon.manager);
    Jon inherits from Employee, right?

    oh brother....



    also, thank you for the obj code you posted for grabbing obj keys...

    I don't know why, but in my thingie this code prints this:

    1 = [object Object]
    my code:

    Code:
    list = data.users;
    
    for (var prop in list) {
    	if( list.hasOwnProperty( prop ) ) {
    		$('#console').append(prop + " = " + list[prop]);
    	} 
    }
    this other code

    Code:
     data.users[i].firstName
    prints the value fine....

    thank you very much for your response.....

  5. #5
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,411
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by maya90 View Post
    wouldn't something like

    Code:
    Manager = new Employee()
    ???

    make "Manager" inherit from Employee?
    That would make Manager a new instance of Employee. If you mean:
    Code:
    Manager.prototype = new Employee();
    Then what I'm doing is saying that I want Manager objects to have access to the methods and properties of Employee (after all, a manager is a type of employee too).


    Quote Originally Posted by maya90 View Post
    like in this example...

    Code:
    function Employee() {
    	this.dept = "HR";
    	this.manager = "John Johnson";
    }
    
    var Jon = new Employee();
         console.log(Jon.manager);
    Jon inherits from Employee, right?
    No, Jon IS an Employee - the variable Jon holds an object of the type Employee.

    Quote Originally Posted by maya90 View Post
    I don't know why, but in my thingie this code prints this:

    my code:

    Code:
    list = data.users;
    
    for (var prop in list) {
    	if( list.hasOwnProperty( prop ) ) {
    		console.log(prop + " = " + list[prop]);
    	} 
    }
    this other code

    Code:
     data.users[i].firstName
    prints the value fine....
    In this case, users is an array of objects - if you wanted to iterate the properties of those object you need to nest that inside a loop which iterates over the array, something like this:
    Code JavaScript:
    var length = data.users.length;
    for(var i = 0; i < length; i++) {
        var user = data.users[i]
        for (var prop in user) {
    	if( list.hasOwnProperty( prop ) ) {
    		console.log(prop + " = " + user[prop]);
    	} 
        }
    }

  6. #6
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    820
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Something that's helpful to note is that prototypical structures can simulate what classes do, but not the other way around. Classes can't do what prototyping does, so prototyping is more flexible than classes.

    Basically all object contain a prototype and a constructor. The prototype is a set of properties (you could call them default values) that exist on those created objects, and the constructor is a function that runs when a new object is created. Also, each object has a hidden reference to a parent prototype, which is what you alluded to earlier.

    I find though that an image can help to replace a thousand words. The following guide on JavaScript object is a must-read, with good information and diagrams helping to explain what prototypes are.

    thank you Paul.... I guess I hadn't seen your comment when I posted my previous response....

    ok, so a prototype is a set of default key-value pairs that..... all objects you create in JavaScript have (I mean objs you create in classic fn syntax) ?? I suppose these are inherited when you create an instant of this object with the keyword "new"??)

    so a "prototype" is just this set of default key-value pairs? like local variables in a Java class...??
    (oooopsss.. that would be class variable, as in Java there are no local vars in classes, only in methods.... hmmmm....

    I still don't know what you mean by "parent prototype"... parent of what? prototype is just a list of properties and values.... why don't we just call them default properties or something? (in Java classes they're also referred to as properties (as long as they're static, I suppose.....;-)
    (and are these default key-value pairs inside the constructor or outside it? (& what are they????? ;-) what are these default key-value pairs? is there a list of them? ;-)

    thank you very much for all your help these last few days, Paul....... I really appreciate it....
    (with JSON you have no choice but dig into OO... I still find it a bit hard... not all of it, but some aspects of it.... (I find it harder than Java OOP...)

    and thank you for the url you posted... I will read it tomorrow....

    have a good day.....

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,830
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    JavaScript is a prototyping language whereas Java is an object oriented one. Since OO is far more limited than prototyping you can't replicate the prototype structuring in JavaScript in any OO language.

    The Object.create() method was recently introduced into Javascript to simplify the way that inheritence is applied. It allows you to do in one statement what used to take four or five.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  8. #8
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,411
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    The following guide on JavaScript object is a must-read, with good information and diagrams helping to explain what prototypes are.
    http://mckoss.com/jscript/object.htm
    Very interesting article Paul, thanks for sharing. Every time I read another article about prototypes I learn something new!

  9. #9
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    820
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    thank you fretburner.. but this still doesn't print... :-(
    (and I don't get an error....)

    but I see what you're saying, I had to loop down one more level to get the list of keys for each user.....

    so when you do this,

    Code:
     for (var prop in user) {
    how does JS know if 'prop' is the KEY or the VALUE?

    thank you very much for your help...

  10. #10
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    820
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by fretburner View Post
    No, Jon IS an Employee - the variable Jon holds an object of the type Employee.
    oh my gosh, that's right.. I was thinking of when you extend a class in Java.. of course it's not the same as instantiating a class.... oh brother...

    well, instead of bugging you guys any more I will read the url Paul posted yesterday, that you also said was very good....:-)

    thank you all very much for your help....

  11. #11
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,411
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by maya90 View Post
    thank you fretburner.. but this still doesn't print... :-(
    There are a couple problems with your JS:
    Code JavaScript:
    for (var prop in user) {
        if( list.hasOwnProperty( prop ) ) {
            $('content').html(prop + " = " + user[prop]);
        } 
    }
    • You're checking if list.hasOwnProperty but you want to be checking the user object.
    • You're missing the hash (id) symbol from your jQuery selector - it should be $('#content')
    • You probably want to be calling .append rather than .html, otherwise you'll only see the last property displayed


    Quote Originally Posted by maya90 View Post
    how does JS know if 'prop' is the KEY or the VALUE?
    It's just the way that particular construct works, it iterates over keys/property names.
    Last edited by fretburner; Jul 5, 2013 at 11:40. Reason: Added additional info

  12. #12
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    820
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    oh my gosh.. two stupid mistakes... :

    it finally works now....:-)

    (and, just like you said, I changed that "list" to "user" in there.....)

    now I have to loop thru the "joined" obj, since that one contains key-val pairs....

    (bottom line with JSON: when you're looping thru an array, if element you encounter is an object instead of a value you need to stop and loop thru the key-val pairs in that object.. yes? I find this quite easy in jQuery, now learning how to do "the old-fashioned" way....:-)

    once again thank you very much for your help...

  13. #13
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    820
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    fretburner,

    I have another question.....

    how does JS know if 'prop' is the KEY or the VALUE?
    It's just the way that particular construct works, it iterates over keys/property names.

    so in code like this (which I found online)

    Code:
      var output="<ul>";
            for (var i in data.users) {
                output+="<li>" + data.users[i].firstName + " " + data.users[i].lastName + " -- " + data.users[i].joined.month+"</li>";
            }
    "i" is the KEY (isn't it being used as the index here? not the KEY?)


    thanks again....

  14. #14
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,411
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by maya90 View Post
    now I have to loop thru the "joined" obj, since that one contains key-val pairs....
    You could use a recursion to do this:
    Code JavaScript:
    function iterateProperties(obj) {
        for (var property in obj) {
            if (obj.hasOwnProperty(property)) {
                if (typeof obj[property] == "object")
                    iterate(obj[property]);
                else
                    $('#content').append(prop + " = " + obj[prop] + '<br>');
            }
        }
    }
     
    var length = data.users.length;
    for(var i = 0; i < length; i++) {
        var user = data.users[i]
        iterateProperties(user);
        $('#content').append('<br>');
    }

    It will loop through all the properties and output all the strings. If it finds a nested object, it repeats the process for that object.

  15. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by maya90 View Post
    so in code like this (which I found online)

    Code:
      var output="<ul>";
            for (var i in data.users) {
                output+="<li>" + data.users[i].firstName + " " + data.users[i].lastName + " -- " + data.users[i].joined.month+"</li>";
            }
    "i" is the KEY (isn't it used as the index here? not the KEY?)
    Yes, I can see where your confusion lies. It's confusing because for...in is bad for iterating over an array. There are technical reasons, and ideological reasons for that, - which we can get in to if you want to delve more deeply in to that.

    The for...in code is less confusing when it uses key instead of i, because a variable called key more closely represents what a for...in loop is supposed to be used for - to loop over the keys of an object.

    Code javascript:
    var output = ...,
        key;
    for (key in data.users) {
        ...
    }

    The name of the variable is of no importance to JavaScript. The name is to help the programmer to more easily understand the intention of the code.

    When using a variable called key, it is expected that it will be for an object that contains differently named keys, for example:

    Code javascript:
    var myObj = {
        name: "Steve Jobs",
        company: "Apple",
        email: "sjobs@apple.com"
    }

    So when iterating through that object, the variable called key will contain a string value of "name" and then "company" and lastly "email".
    When using a variable called i, it is expected that the variable will be a numbered index for an array.

    In your particular situation, data.users is not an object - it's an array instead. Arrays are not to be processed using for...in.

    The upshot though is - loop through an array and process it using a normal for loop, or use other more specialised iteration methods for arrays. Reserve the use of for...in for when processing non-array objects.

    Here is how you should loop through the data.users array:

    Code javascript:
    var output = "<ul>",
        i;
    for (i  = 0; i < data.users.length; i += 1) {
        output += "<li>" + data.users[i].firstName + " " + data.users[i].lastName + " -- " + data.users[i].joined.month + "</li>";
    }

    You could also use the forEach method to process array items:

    Code javascript:
    var output = "<ul>";
    data.users.forEach(function (item, index) {
        output += "<li>" + data.users[index].firstName + " " + data.users[index].lastName + " -- " + data.users[index].joined.month + "</li>";
    }

    The index doesn't have to be used though. It is better to use the array's item that's passed to the function instead:

    Code javascript:
    var output="<ul>";
    data.users.forEach(function (item, index) {
        output += "<li>" + item.firstName + " " + item.lastName + " -- " + item.joined.month + "</li>";
    }

    Because we're not even using the index variable now, we can remove that from the function parameters:

    Code javascript:
    var output="<ul>";
    data.users.forEach(function (item) {
        output += "<li>" + item.firstName + " " + item.lastName + " -- " + item.joined.month + "</li>";
    }

    "item" can also be renamed to "user", to make things easier for us to understand what the function is doing:

    Code javascript:
    var output="<ul>";
    data.users.forEach(function (user) {
        output += "<li>" + user.firstName + " " + user.lastName + " -- " + user.joined.month + "</li>";
    }

    We could also use the reduce method instead. It start with the string that we give it as the second argument, and it runs the function for each item in the array, each time adding more content on to the string.

    Code javascript:
    var output = data.users.reduce(function (str, user) {
        return str + "<li>" + user.firstName + " " + user.lastName + " -- " + user.joined.month + "</li>";
    }, "<ul>");

    So in summary, techniques that are designed to handle arrays, are the best ways of dealing with arrays.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #16
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    820
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    oh brother... now get error:

    Code:
     iterate is not defined
    ????


    (I put the fn decl outside $(document).ready(function() {} this where you're supposed to to put fn declarations....)


    again, thank you very much....

  17. #17
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,411
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by maya90 View Post
    oh brother... now get error:

    Code:
     iterate is not defined
    ????
    Oops, sorry, my fault..
    Code JavaScript:
    function iterateProperties(obj) {
        for (var property in obj) {
            if (obj.hasOwnProperty(property)) {
                if (typeof obj[property] == "object")
                    iterateProperties(obj[property]); // This line changed
                else
                    $('#content').append(prop + " = " + obj[prop] + '<br>');
            }
        }
    }
    I changed the name of the function from iterate to iterateProperties, but I missed the call from inside the function itself.

  18. #18
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    820
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    awesome!! :-)

    thank you!!

    (I did have to chg "prop" to "property" in the print statement....;-)
    (at least I was able to catch that....;-)

    I really appreciate your help....

  19. #19
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    820
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    so I also wanted to print the info like it's here, so I had to nest the looping, like I did on this page....

    so I did this

    and another in which for the nested object ("joined") I printed props & values instead of just values..


    this is so much easier in jQuery (& a lot less code also), but I need to know how to do this in plain JS also....

    so is my code cool in those two examples? :-)

    one again, thank you very much for your help....

  20. #20
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by maya90 View Post
    this is so much easier in jQuery, but I need to know how to do this in plain JS also....
    The only piece in that iterateProperties function is the $('#content') line, which can be easily changed in to normal JavaScript:

    Code javascript:
    document.querySelector('#content').innerHTML += (prop + " = " + obj[prop] + '<br>');
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  21. #21
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    820
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    thank you Paul.... yes of course... and of course with plain JS everything is more complicated...

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

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

    Code:
    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....

  22. #22
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    820
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    oh my gosh.. had to do...

    Code:
    	lineBr = document.createElement("br");
    for that <br> element.... lol....:-)

    (man, how jQuery spoils ya... )

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

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

    plain JavaScript:

    Code:
    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] + '&lt;br&gt;'; )

  23. #23
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    820
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    i.e., why can jQuery handle a string like "<br"> and plain JS can't?

  24. #24
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,411
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by maya90 View Post
    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:
    Code JavaScript:
    $.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>';
        }
    });

  25. #25
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Ahh, and the $.getJSON can be changed to native JavaScript too, thanks to a tiny library called MicroAjax

    HTML Code:
    <script type="text/javascript" src="microajax.js"></script>
    <script type="text/javascript">
    ...
    </script>
    Code javascript:
    microAjax('json/users2.json', function(data) {
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •