We Keep Coding

Why is the value of a specific key for a doc getting 'undefined' [duplicate]

Is there something that I'm missing that would allow item to log as an object with a parameter, but when I try to access that parameter, it's undefined?
What I've tried so far:
console.log(item) => { title: "foo", content: "bar" } , that's fine
console.log(typeof item) => object
console.log(item.title) => "undefined"
I'll include some of the context just in case it's relevant to the problem.
var TextController = function(myCollection) {
this.myCollection = myCollection
}
TextController.prototype.list = function(req, res, next) {
this.myCollection.find({}).exec(function(err, doc) {
var set = new Set([])
doc.forEach(function(item) {
console.log(item) // Here item shows the parameter
console.log(item.title) // "undefined"
set.add(item.title)
})
res.json(set.get());
})
}
Based on suggestion I dropped debugger before this line to check what item actually is via the node repl debugger. This is what I found : http://hastebin.com/qatireweni.sm
From this I tried console.log(item._doc.title) and it works just fine.. So, this seems more like a mongoose question now than anything.
There are questions similar to this, but they seem to be related to 'this' accessing of objects or they're trying to get the object outside the scope of the function. In this case, I don't think I'm doing either of those, but inform me if I'm wrong. Thanks

Solution
You can call the toObject method in order to access the fields. For example:
var itemObject = item.toObject();
console.log(itemObject.title); // "foo"
Why
As you point out that the real fields are stored in the _doc field of the document.
But why console.log(item) => { title: "foo", content: "bar" }?
From the source code of mongoose(document.js), we can find that the toString method of Document call the toObject method. So console.log will show fields 'correctly'. The source code is shown below:
var inspect = require('util').inspect;
...
/**
* Helper for console.log
*
* #api public
*/
Document.prototype.inspect = function(options) {
var isPOJO = options &&
utils.getFunctionName(options.constructor) === 'Object';
var opts;
if (isPOJO) {
opts = options;
} else if (this.schema.options.toObject) {
opts = clone(this.schema.options.toObject);
} else {
opts = {};
}
opts.minimize = false;
opts.retainKeyOrder = true;
return this.toObject(opts);
};
/**
* Helper for console.log
*
* #api public
* #method toString
*/
Document.prototype.toString = function() {
return inspect(this.inspect());
};

Make sure that you have defined title in your schema:
var MyCollectionSchema = new mongoose.Schema({
_id: String,
title: String
});

Try performing a for in loop over item and see if you can access values.
for (var k in item) {
console.log(item[k]);
}
If it works, it would mean your keys have some non-printable characters or something like this.
From what you said in the comments, it looks like somehow item is an instance of a String primitive wrapper.
E.g.
var s = new String('test');
typeof s; //object
s instanceof String; //true
To verify this theory, try this:
eval('(' + item + ')').title;
It could also be that item is an object that has a toString method that displays what you see.
EDIT: To identify these issues quickly, you can use console.dir instead of console.log, since it display an interactive list of the object properties. You can also but a breakpoint and add a watch.

Use findOne() instead of find().
The find() method returns an array of values, even if you have only one possible result, you'll need to use item[0] to get it.
The findOne method returns one object or none, then you'll be able to access its properties with no issues.

Old question, but since I had a problem with this too, I'll answer it.
This probably happened because you're using find() instead of findOne(). So in the end, you're calling a method for an array of documents instead of a document, resulting in finding an array and not a single document. Using findOne() will let you get access the object normally.

A better way to tackle an issue like this is using doc.toObject() like this
doc.toObject({ getters: true })
other options include:
getters: apply all getters (path and virtual getters)
virtuals: apply virtual getters (can override getters option)
minimize: remove empty objects (defaults to true)
transform: a transform function to apply to the resulting document before returning
depopulate: depopulate any populated paths, replacing them with their original refs (defaults to false)
versionKey: whether to include the version key (defaults to true)
so for example you can say
Model.findOne().exec((err, doc) => {
if (!err) {
doc.toObject({ getters: true })
console.log('doc _id:', doc._id) // or title
}
})
and now it will work

You don't have whitespace or funny characters in ' title', do you? They can be defined if you've quoted identifiers into the object/map definition. For example:
var problem = {
' title': 'Foo',
'content': 'Bar'
};
That might cause console.log(item) to display similar to what you're expecting, but cause your undefined problem when you access the title property without it's preceding space.

I think using 'find' method returns an array of Documents.I tried this and I was able to print the title
for (var i = 0; i < doc.length; i++) {
console.log("iteration " + i);
console.log('ID:' + docs[i]._id);
console.log(docs[i].title);
}

If you only want to get the info without all mongoose benefits, save i.e., you can use .lean() in your query. It will get your info quicker and you'll can use it as an object directly.
https://mongoosejs.com/docs/api.html#query_Query-lean
As says in docs, this is the best to read-only scenarios.

Are you initializing your object?
function MyObject()
{
this.Title = "";
this.Content = "";
}
var myo1 = new MyObject();
If you do not initialize or have not set a title. You will get undefined.

When you make tue query, use .lean() E.g
const order = await Order.findId("84578437").lean()

find returns an array of object , so to access element use indexing, like
doc[0].title

How to determine if $(this) is in array on click event

I have a set of id values in 4 arrays. Each array will be assigned a text value for an h1 and a p that I haven't put in yet. Right now I'm just trying to get it to alert if one of the images in array graphicDesign is clicked. I tried using $.inArray
DEMO
var graphicDesign = [$('#design'), $('#DD'), $('#SElogo')];
var webDesign = [$('#bootstrap'), $('#farm'), $('#pong'), $('#SE'), $('#dung')];
var programming = [$('#SE'), $('#dung'), $('#sacar')];
var other = [$('#firm')];
function categories() {
if ($.inArray(this, graphicDesign) > -1) {
alert('hello');
}
}

You should not store DOM objects in an array and try to match them with $.inArray.
Using ids or another attribute would be a better solution.
For example :
https://jsfiddle.net/1f9xd3t0/
var graphicDesign = ['design', 'DD', 'SElogo'];
function categories(id) {
if ($.inArray(id, graphicDesign) > -1) {
alert('hello');
}
}
categories('design');

You need to pass the event object to categories().
$('.portPic').click(function(e) {
// ...
categories(e);
});
function categories(e) {
console.log(e.target);
if ($.inArray(e.target, graphicDesign) > -1) {
alert('hello');
}
}
UPDATE
And maybe use id's rather than jQuery objects in your arrays.
var graphicDesign = ['design', 'DD', 'SElogo'];
Then use e.target.id in categories().

You can use typeof , here is an example.
// Objects
typeof {a:1} === 'object';
// use Array.isArray or Object.prototype.toString.call
// to differentiate regular objects from arrays
typeof [1, 2, 4] === 'object';

Array.indexOf() is a native function that does the same thing.
graphicDesign.indexOf(this) > -1 would be the equivalent of what you wrote.
In your usage, this is going to refer to the global object, unless you elsewhere assign this function to an object and call it as a method... But then you're trying to tell if the object you're calling it on is inside the graphicDesign array?
Here's an example of a usage that would fire the alert:
var graphicDesign = [ {} ]
graphicDesign[0].categories = function() {
if (graphicDesign.indexOf(this) > -1) {
alert('the object this method was called on is inside the graphicDesign array')
}
}
graphicDesign[0].categories()
It's unclear exactly what you're trying to accomplish, however (you mention a click detection, but there's no click handler here, etc.)... I hope this helps?

This block of $.inArray is working, but you put them in wrong place, it always returned -1, so you cannot get the alert('hello'). Please fix the overall logic.
if ($.inArray(this, graphicDesign) > -1) {
alert('hello'); }

Selecting multiple properties in Javascript or D3

I'm trying to remove a few data points from a map created in D3.
Here I'm removing a property with name matching "Luxembourg", but I would also like to remove a property with name matching "Liechtenstein". How should I write this?
.filter(function(labels) {
return labels.properties.name != "Luxembourg";
})
I have tried using javascript references but I'm having trouble applying these.

How about using Array.prototype.indexOf
.filter(function(labels) {
var toFilter = ['Luxembourg', 'Liechtenstein']
return toFilter.indexOf(labels.properties.name) !== -1
})

Something simple like this will do:
var countriesToRemove = [ "Luxembourg", "Liechtenstein"]
data.filter(function(labels) {
return countriesToRemove.indexOf(labels.properties.name) >= 0
})

Find data() key-value pairs for every element

What is the best way to view all jQuery data key-value pairs across every element (in jQuery 2.x)?
A selection-oriented approach ( e.g. $('*').data() ) obviously does not work, because the return value is tied to a single element.
I know that I can iterate over every element, checking each for data:
var allData = [];
$('html *').each(function() {
if($.hasData(this)) {
allData.push({ el: this, data: $(this).data() })
}
})
JSFiddle
This does produce the expected output, but iterating over each possible data key feels like a backwards approach to this problem.
Is there some way to find all element data directly?
N.B. I'm interested for debugging, not production code.

You could select every element within the body with $("body *") and apply jQuery's .filter() to it. Working example:
var $elementsContainingData $("body *").filter(function() {
if($.hasData(this)) return this;
});
console.log($elementsContainingData);
Edit
As #spokey mentioned before, there's an internal variable named "cache" within the jQuery object: $.cache.
This variable consists of a bunch of objects which contain keys like "data" or "events":
5: Object
data: Object
events: Object
handle: function (a){return typeof m===K||a&&m.event.triggered===a.type?void 0:m.event.dispatch.apply(k.elem,arguments)}
__proto__: Object
You can iterate through that object and filter for the data:
var filteredCache = $.each($.cache,function() {
if(typeof this["data"] === "object") return this;
});
Here's an working example plus a function to merge that stuff into a single and more handy object consisting only of dataKey => dataValue pairings: Fiddle
Edit
As mentioned in comments this solution does not work in jQuery version 2.x since $.cache is deprecated.
My last suggestion is creating a hook for jQuerys data function in order to extend an own object$.dataCache = {}; each time data() is called.
Extending, replacing or adding jQuerys functions is done by accessing $.fn.functionName:
$.fn.data = function(fn,hook) {
return function() {
hook.apply(this,arguments);
return fn.apply(this,arguments);
}
}($.fn.data,function(key,value) {
var objReturn = {};
objReturn[key] = value;
$.extend($.dataCache,objReturn);
});
This also works great in jQuery version 2: Fiddle

Why use jQuery's css() function instead of maxHeight or the other named CSS functions?

After reading jQuery's CSS documentation, it doesn't look like it offers any advantages over just getting the Javascript element directly and manipulating its CSS by updating the property. Am I missing something?

You should use the jQuery css method, it provides many benefits:
You can set multiple css properties inside a single .css call.
You can pass integer values and it will automatically convert to px.
It normalizes many cross-browser issues. For example, I can just use .css('opacity', 0.8) without having to test if the user is using IE and applying ugly alpha workarounds.
I find $('#foo').css('prop', 'value') more organized and readable than
$('#foo')[0].style.prop = 'value';
Let alone .css provides other jQuery's functionalities, such as chaining methods and automatically iterating through element arrays.

jQuery makes DOM lookup much easier, and I like the CSS function in jQuery because I don't need to remember the names of additional function to manipulate the style. I can use .css() in conjunction with the standard CSS properties and values.

One advantage could be to separate what styles you're setting from the act of setting them. Perhaps you dynamically construct the styles in JavaScript code elsewhere, for example. This would allow you to tweak that logic without having to tweak the code that applies the styles.
Or perhaps you'd like to make a "configurable" script and put all of the styles into header variables to separate into a section of configurable options. (Writing your own jQuery plugin often involves this.) You could bury the code which applies the styles in the "do not modify below this line" section of the file, leaving the settable properties where people can configure them.

jQuery's $.fn.css really doesn't do much of anything. I mean, here's the source function itself:
css: function( elem, name, extra ) {
var ret, hooks;
// Make sure that we're working with the right name
name = jQuery.camelCase( name );
hooks = jQuery.cssHooks[ name ];
name = jQuery.cssProps[ name ] || name;
// cssFloat needs a special treatment
if ( name === "cssFloat" ) {
name = "float";
}
// If a hook was provided get the computed value from there
if ( hooks && "get" in hooks && (ret = hooks.get( elem, true, extra )) !== undefined ) {
return ret;
// Otherwise, if a way to get the computed value exists, use that
} else if ( curCSS ) {
return curCSS( elem, name );
}
}
Oh, I guess when I said "doesn't do much of anything" i really meant that it normalizes names so that you can use hyphen-notation instead of camelCase, supports cross-browser compatibility for opacity and normalizes the property name for float before returning the appropriate value.
I suppose I also glossed over the fact that this is only the accessor version of the function, the mutator method is:
style: function( elem, name, value, extra ) {
// Don't set styles on text and comment nodes
if ( !elem || elem.nodeType === 3 || elem.nodeType === 8 || !elem.style ) {
return;
}
// Make sure that we're working with the right name
var ret, type, origName = jQuery.camelCase( name ),
style = elem.style, hooks = jQuery.cssHooks[ origName ];
name = jQuery.cssProps[ origName ] || origName;
// Check if we're setting a value
if ( value !== undefined ) {
type = typeof value;
// convert relative number strings (+= or -=) to relative numbers. #7345
if ( type === "string" && (ret = rrelNum.exec( value )) ) {
value = ( +( ret[1] + 1) * +ret[2] ) + parseFloat( jQuery.css( elem, name ) );
// Fixes bug #9237
type = "number";
}
// Make sure that NaN and null values aren't set. See: #7116
if ( value == null || type === "number" && isNaN( value ) ) {
return;
}
// If a number was passed in, add 'px' to the (except for certain CSS properties)
if ( type === "number" && !jQuery.cssNumber[ origName ] ) {
value += "px";
}
// If a hook was provided, use that value, otherwise just set the specified value
if ( !hooks || !("set" in hooks) || (value = hooks.set( elem, value )) !== undefined ) {
// Wrapped to prevent IE from throwing errors when 'invalid' values are provided
// Fixes bug #5509
try {
style[ name ] = value;
} catch(e) {}
}
} else {
// If a hook was provided get the non-computed value from there
if ( hooks && "get" in hooks && (ret = hooks.get( elem, false, extra )) !== undefined ) {
return ret;
}
// Otherwise just get the value from the style object
return style[ name ];
}
}
So, all-in-all the advantages are that you don't have to worry about cross-browser issues when trying to dynamically style HTML elements, because the dedicated jQuery devs have already normalized everything nicely into one function.
code from jQuery version 1.7.2

There are quite a few benefits over the base JS implementation, here are my favorites:
use a selector $('a').css(....) and it will apply that CSS to ALL selector matched "a"s. You would have to use a loop otherwise which would create more code
can pass an object {} in and it adds styles that way
can execute a function to compute the value (like in the loop mentioned above).
All this results in a little bit cleaner and more concise code in my opinion.