I want to display key-value pairs stored in an array (derived from a Session-JSON variable) by using the #each template directive. How can I get access (if possible) to the fields of objects in an array.
Sorry, if this is a question that has been already answered, but I didn't find an appropriate answer here.
Here is some sample code (part of a template helper):
attributes: function () {
var attributes = [];
attributes = [{key: test1, value: 1}, {key: test3, value: 2}, {key: test3, value: 3}];
return attributes;
},
In the template, I used "this" or "this.key". Both didn't work the way as expected.
Thanks for any tipps!
Have you defined variables test1, test3 ? It looks like you put test1 and test3 without ", so it means js is trying to find variables with such names. That's why you couldn't see this.key working.
var attributes = [];
attributes = [{key: "test1", value: 1}, {key: "test2", value: 2}, {key: "test3", value: 3}];
return attributes;
In template:
{{#each attributes}}
{{this.key}} : {{this.value}}<br>
{{/each}}
Output:
test1 : 1<br>
test2 : 2<br>
test3 : 3<br>
Check here
Related
I have an object in Javascript as follows:
profile= {
profilePicture: null,
username: null,
age: null,
gender: null,
followedBy: [],
following: [],
aboutMe: null
}
And I would like to destructure all of the properties into variables, like such:
const {userName, age, gender, followedBy, following, aboutMe} = profile
Let's say in the future this profile object will have 30 properties, how can I iterate over all the properties instead of typing them one by one? I was thinking something like this
const {userName, age, ...rest} = profile
but instead of the rest variable, it actually gives me all the other property names as stand-alone variable names that I can use. I tried something like
const {...Object.keys(profile)} = profile
but it's not working.
Any ideas?
Simply change the curly bracket to square bracket
For Example
const [userName, age, gender, followedBy, following, aboutMe] = profile
const [userName, age, ...rest] = profile
I have relation data which is in record form:
Record : { Id: 40, Material: test, Size: test, Description: test, Quantity: test, Spec: test, Price:
test, Delivery: test, Quotes_fk: 21},
Record : { Id: 43, Material: test 2, Size: test 2, Description:
test 2, Quantity: test2, Spec: test2, Price: test2, Delivery: test2, Quotes_fk: 21}
I need to present this as a table on a pdf with the headings Id,Material,Size, Description, Quantity, Spec, Price, Delivery and as I am new to coding can’t work it out. I have managed to use Regex format to make it presentable, but it needs to be in table format. So far I can change the data to a string them replace some of the commas with line breaks.
var quotes = questionnaire.QuoteItems;
var quotes2 = quotes.toString();
var quotes3 = quotes2.replace(/{/g , "<br>");
Managed to work through each item in the related record and display using the following code:
for (var i=0; i < questionnaire.QuoteItems.length; i++) {
rows.push([questionnaire.QuoteItems[i].Material, questionnaire.QuoteItems[i].Size, questionnaire.QuoteItems[i].Description, questionnaire.QuoteItems[i].Quantity, questionnaire.QuoteItems[i].Spec, questionnaire.QuoteItems[i].Price, questionnaire.QuoteItems[i].Delivery]);
}
$Keys and $Values are useful, but they don't help if I want to create this kind of union type:
type Screen = 'screen1' | 'screen2' | 'screen3';
const transitions = [
{name: 'from1to2', from: 'screen1', to: 'screen2'},
{name: 'from2to3', from: 'screen2', to: 'screen3'},
{name: 'from3to2', from: 'screen3', to: 'screen2'},
{name: 'from2to1', from: 'screen2', to: 'screen1'},
];
// DRY here! But how?
type Transition = 'from1to2' | 'from2to3' | 'from3to2' | 'from2to1';
Thanks for any advice!
Looks like the best solution so far is a workaround like this:
type Screen = 'screen1' | 'screen2' | 'screen3';
const transitionsConfig = {
from1to2: {from: 'screen1', to: 'screen2'},
from2to3: {from: 'screen2', to: 'screen3'},
from3to2: {from: 'screen3', to: 'screen2'},
from2to1: {from: 'screen2', to: 'screen1'},
};
const transitions = Object.keys(transitionsConfig).map(k => ({
name: k,
...transitionsConfig[k],
}));
type Transition = $Keys<typeof transitionsConfig>;
I don't think it's possible to do this. The values in your transitions array are runtime values, while types are a compile-time abstraction. In other words the compiler can't look inside your array because it essentially doesn't exist (or at least, doesn't exist as a thing with a value yet). You probably will have to define your transition types individually and create a union type between them.
Cool idea though. :)
I am using redux and immutablejs, and I am trying to create a reducer function.
I have come across some behaviour I did not expect
const a = new Immutable.Map({
numbers: [{id: 1},{id: 2}]
});
const b = a.merge(
{
numbers: [{id: 4},{id: 5}]
}
);
Here are the values of a and b
a.get("numbers");
[Object, Object]
b.get("numbers");
List {size: 2, _origin: 0, _capacity: 2, _level: 5, _root: null…}
b.get("numbers").get(0);
Map {size: 1, _root: ArrayMapNode, __ownerID: undefined, __hash: undefined, __altered: false}
I did not expect numbers to be an immutable List of Map objects.
In my application, using redux, I set the initial state to:
const initialState = new Immutable.Map({
error: null,
isBusy: false,
films: []
});
I the reducer, when I fetch films I try to merge them as follows:
return state.merge({
isBusy: false,
films: action.payload,
error: null
});
This causes issues in the react component, as films are initially an array of objects, and then they become an Immutable List of Maps.
Should I create a different initial state, or should I be using a different type of merge? Or something else?
Thanks
I think what you are trying to do is not merge of whole map object, at least should not be in the case you say, it should be update + ( concat or merge ):
const a = new Immutable.Map({
numbers: [{id: 1},{id: 2}]
});
const b = a.update("numbers", numbers =>
numbers.concat([{id: 4},{id: 5}])
// or
numbers.merge([{id: 4},{id: 5}])
);
by doing merge in your code, you are overriding the existing ones due to the nature of "merge" because the keys are the same in the merge; "numbers".
Say I'm having a plain Backbone.Collection with some models in it:
var Library = Backbone.Collection.extend({
model: Book
});
lib = new Library(
[Book1, Book2, Book3, Book4, Book5, Book6]
]);
How can I move a model within a collection - e.g. the 5th one to the 2nd position? So no sorting by a model field but just changing the sort order manually.
Note: I simplified the models Book1, .... They are of course Backbone.Models.
You can directly access the array of models to modify the order. Loosely based on this question Move an array element from one array position to another, something like this should work:
var c = new Backbone.Collection([{id: 1}, {id: 2}, {id: 3}, {id: 4}, {id: 5}]);
console.log(c.pluck("id"));
var from_ix = 4,
to_ix = 1;
c.models.splice(to_ix, 0, c.models.splice(from_ix, 1)[0]);
console.log(c.pluck("id"));
And a demo http://jsfiddle.net/nikoshr/5DGJs/