Develop Reference

How can I render a list of search results?

I'm really stumped as to what is going on. I reviewed videos on map, arrow functions and implicit returns but still have no idea why my code is not making sense. When I console log everything it is fine, all the data is there. However, when I try to output the data into a div or list, nothing renders. What gives?
Here is the code in question:
const renderSearchResults = () => {
if (this.state.searchResults) {
Object.keys(this.state.searchResults).map((key) => {
console.log(this.state.searchResults[key]);
return <div>{this.state.searchResults[key].Title}</div>;
});
} else {
return <p>Loading...</p>;
}
};

Object.keys(this.state.searchResults).map() creates a new array but you need to return it in your renderSearchResults()
return Object.keys(this.state.searchResults).map((key) => {
...

Confusion about const declaration inside object

I came across this piece of code here, and I noticed that const data is declared inside the brackets. I thought you had to use the key: value format inside the brackets when creating an object. How does this work?
data = {
const data = await d3.tsv("https://gist.githubusercontent.com/mbostock/8033015/raw/01e8225d4a65aca6c759fe4b8c77179f446c5815/unemployment.tsv", (d, i, columns) => {
return {
name: d.name.replace(/, ([\w-]+).*/, " $1"),
values: columns.slice(1).map(k => +d[k])
};
});
return {
y: "% Unemployment",
series: data,
dates: data.columns.slice(1).map(d3.utcParse("%Y-%m"))
};
}

That is not valid javascript. The reason it works is that Observable has its own syntax. It's deliberately designed to be similar to javascript, but it isn't actually javascript. You can read more about this here:
https://observablehq.com/#observablehq/observables-not-javascript

The code above is not a valid javascript code.
observableHQ is using its own parser to achieve that https://github.com/observablehq/parser the code is translated to the following:
const chart = (arguments) => {
// code...
}

Turn a for loop on an object into a .map

I have been told my function:
for (const key of Object.keys(temp)) {
this.sessionData.push(temp[key]);
}
Must now use a .map instead,
I have tried this below:
Object.keys(temp).map(function(key) {
this.sessionData[key];
})
But 1 I don't know if it's actually accurate, and also, it cant access the data outside of the scope of the function it is in, here is the whole function below:
public sessionData;
sessionDates(sessionsData) {
const temp = {};
this.sessionData = [];
sessionsData.forEach(session => {
const date = moment(session.startDatetime).format('DDMMYYYY');
if (temp[date]) {
temp[date].push(session);
} else {
temp[date] = [session];
}
});
Object.keys(temp).map(function(key) {
this.sessionData[key];
})
TRYING TO USE THIS BELOW... session data is undefined, it can't access out of the scope?
Object.keys(temp).map(function(key) {
this.sessionData[key];
})
But this works..
for (const key of Object.keys(temp)) {
this.sessionData.push(temp[key]);
}
So this new .map method can't access anything out of its scope.. sigh!
If anybody can help that would be amazing! Thanks!

In Javascript all functions can access variables from outside (called "higher scope") - it's one of the strengths of the language and is called "capture".
The reason your code is failing is because it's using this.sessionData inside a function declaration, which cases problems because this in javascript is... somewhat complex. But you don't need it!
You also need to make sure you return the value you want to output. Here's how I would write it:
this.sessionData = Object.keys(temp).map(key => temp[key]);

An Array containing a function in React - [function(page) { return page.menu_order; }]?

I am wondering what this line does:
allPages = _.sortBy(allPages, [function(page) { return page.menu_order; }]);
I am wondering especially about the array containing a function
[function(page) { return page.menu_order; }]
could someone explain this to me? Will it return an array? How does this work, and what is this technique called? I have never seen this before.

Angular JS $scope, databinding, and variables changing.

So I have an APP I'm working on in Angular JS v1.4.0 and I'm running into a scoping issue. There's a section that has a form that needs to be submitted, but the data needs to be modified before its sent over. I'm currently trying to do this in the javascript before making the call to the server.
I have $scope.msgEditor, that is an object of a bunch of different values that are necessary for the form, as well as the message variables itself. The important part looks something like this:
msgEditor [
msg: {
groups: {
selected: {
0: '1',
1: '2',
}
}
}
]
I'm trying to take this $scope variable, assign it to a local variable, and begin parsing the data like such:
$scope.formOnSubmit = function () {
formattedMessage = formatDataForSave($scope.msgEditor.msg);
};
function formatDataForSave(message) {
message.groups = message.groups.selected.join(', ');
return message;
}
What I want to happen, is $scope.msgEditor.msg to not change at all, and formattedMessage to be returned from the second function, so it can be placed into a $http call. However, the join changes message, formattedMessage, AND $scope.msgEditor.msg
I did a bit more testing, to see what was happening:
$scope.formOnSubmit = function () {
$scope.test = $scope.msgEditor.msg;
var formattedMessage = $scope.test;
formattedMessage = formatDataForSave(formattedMessage);
};
And found that the change made to formattedMessage, would change $scope.test, which would change $scope.msgEdtior.msg.
Any direction on why this is happening, or how to prevent it would be amazing.

I believe you are confusing about passing arguments into functions in javascript: in javascript all arguments are passed by reference so the consequence is what you are experiencing. Have a look at angular.copy function.
https://code.angularjs.org/1.3.17/docs/api/ng/function/angular.copy
I cannot test this but you could try:
$scope.formOnSubmit = function () {
var msgCopy = angular.copy($scope.msgEditor.msg);
formattedMessage = formatDataForSave(msgCopy);
};
function formatDataForSave(message) {
message.groups = message.groups.selected.join(', ');
return message;
}