I'm having a problem where I need to build a content type. First, I define my model. I'm using Drupal so I need to send values nested in things like:
field_whatever.und[0].value = "";
Say I define an array for images:
$scope.field_my_images = {"und": [{}]};
Because I have a blank array:
<div ngRepeat="image in field_my_images.und"><img ng-src="{{image.url}}" /></div>
Will print the first array element blank. As I push new objects to field_my_images, it works correctly except for the first blank element.
What's the proper way to do this?
I can add details and be more specific as needed....
shouldn't you initialize your scope with this instead?
$scope.field_my_images = {"und": []};
Otherwise, you don't have an empty array, you have an array with an empty object.
Related
I am facing an issue with object property changes in angular JS.
For example I have an array of objects.
$scope.ex1 = [{"name":"Ethel Price","gender":"female","company":"Enersol"},
{"name":"Claudine Neal","gender":"female","company":"Sealoud"},
{"name":"Beryl Rice","gender":"female","company":"Velity"},
{"name":"Wilder Gonzales","gender":"male","company":"Geekko"},
{"name":"Georgina Schultz","gender":"female","company":"Suretech"},
{"name":"Carroll Buchanan","gender":"male","company":"Ecosys"},
{"name":"Valarie Atkinson","gender":"female","company":"Hopeli"},
{"name":"Schroeder Mathews","gender":"male","company":"Polarium"},
{"name":"Lynda Mendoza","gender":"female","company":"Dogspa"},
{"name":"Sarah Massey","gender":"female","company":"Bisba"}]
I have a form where I show the data in a list format to display it am using angular-datatable.
When a user clicks on list items am storing that particular object in an array.
For example the user selects two items from the above list am keeping that two objects in other variable like below:
$scope.selected = [{"name":"Lynda Mendoza","gender":"female","company":"Dogspa"},
{"name":"Sarah Massey","gender":"female","company":"Bisba"}];
The issue is when I change some properties in $scope.selected the changes are reflecting automatically in $scope.ex1 object.
Like below:
$scope.selected[0].name = "Rakesh rekala"
The above change will reflect in $scope.ex1 array to that particular item.
How to restrict this scenario is there any way to solve this.
Javascript objects are mutable, use angular.copy to deep copy your source object array to a variable and then use the variable to push objects into the selected array
You should change your push line.
$scope.selected.push($scope.ex1[0]);
$scope.selected[0].name = "Test"; //ex1 will change
$scope.selected.push(angular.copy($scope.ex1[1]));
$scope.selected[1].name = "Test2"; //It's ok!
http://jsfiddle.net/ms403Ly8/124/
So, I have the following js object structure:
I am trying to add a value to this, for example, "234324" after "ewerewr".
I tried obj["d7vi"] = new_value;
But it gets rid of all the previous values.
Any help?
make it
obj["d7vi"].push(newValue);
you need to add to the array rather than replace its existing values.
I have returned a valid JSON through mongoose to my Jade file, the JSON named things looks like this,
[{
_id: ObjectId("7788h356i0909v7863b75999"),
important: "Critical123",
property:[{name: "Test456"},{name: "Test789"},{name: "Test101112"}]
},
{
_id: ObjectId("7788h356i0909v7863b75908"),
important: "Critical",
property:[{name: "TestNew"},{name:"TestNewlyOpened"}]
}
]
I have a certain jade file spitting out details of a page I wanted like below
Basically when you click on glyphicon-plus-sign, I am opening a modal window
if thing
each something in thing
tr.odd.gradeX(id="firstRow" rowspan="2")
td.imp(type="button") #{something.important}
a.glyphicon-plus-sign(id="#{something._id}" data-toggle="modal" data-target=".bs-example-modal-lg")
My Modal is declared in the samefile below as
.modal.fade.bs-example-modal-lg(id="modalBoxSomething" tabindex='-1', role='dialog', aria-labelledby='myLargeModalLabel', aria-hidden='true', style='display: none;')
.modal-dialog.modal-lg
.modal-content
.modal-header#headerModal
h4#myLargeModalLabel.modal-title
button.close(id="modalCloseButton" type='button', data-dismiss='modal', aria-label='Close')
span(aria-hidden='true') ×
.modal-body
.somethingDetails.col-md-6.col-lg-6
if property
each nameProperty in property
p#propertyName #{nameProperty.name}
This doesn't work. Can I loop over nested sub items in an array for a specific item click event?
I want to repeat the values of property array for each something in this modal window.
Or Should I write a Javascript to do this?
for(var k=0; k<things.length; k++){
for(var m=0; k<things[k].property.length; m++){
$('#propertyName').append('<p>'+JSON.stringify(things[k].property[m].name+'</p>');
}
}
What is the best practice here? The Javascript solution works, But it would be great if what I am trying to achieve in Jade works sublimely.
Can I loop over nested sub items in an array for a specific item click event?
Of course you can. Jade templates are rendered using JavaScript and you can also use raw JavaScript in your templates by using - in the beginning of the line. If your JavaScript code does what you want you can move it's logic into your template file.
What is the best practice here?
Using Jade.
It's not clear what property is in your template file. If you expect Jade to know that it's a property of an array of objects this is not the case. You need to iterate through the array and then iterate through property array of each object element, i.e. 2 nested loops.
Assuming you have used things identifier for the array:
each thing, index in things
h2.sample= thing.important
each item in thing.property
p.propertyName= item.name
Note that IDs must be unique otherwise you have generated an invalid markup.
I'm trying to use Javascript to group an array by one of it's attributes.
Essentially I have a list of e-mail templates, and I'm trying to group them by the category that they are in so that I can make a collapsible accordion with it later.
I think I might have the syntax of underscore JS wrong, or I'm addressing my array incorrectly. Currently I am calling groupby using the following command:
console.log(_.groupBy(result, 'im_category'));
but my array looks like the 'im_category' property is hidden under the attributes function. I'm not sure how to get there.
I've attached my console.log of what the array looks like and what happens when I run that command. (I get three different objects when I should get 2 if it's working correctly. )
Your im_category is a property of the attributes object in your businessEntity - _.groupBy is looking for properties of businessEntity. You need to create a function as iteratee:
var grouped = _.groupBy(result, function (item) {
return item.attributes.im_category;
});
http://jsfiddle.net/jwnzh8w0/
I have some code I'm struggling with. The good news is the code working as intended for a single instance; after some thought I've decided to feature multiple of these image selectors on a page. This works but the ugly approach of duplicating the code doesn't scale well (e.g. what if you want 50 of these on there?) The snag I've hit is how I can refer to a specific array. Is an array even an ideal solution for this?
The Objective
I have a series of images that a user may select from, up to X amount. The selected image ids are stored in an array and the image is added to a "selected images pool". This occurs by using an onClick for the slider, I obtain the Id from the element attributes. This is where I'm getting stuck.
var dataArray = $(this).closest("[id^=carousel]").data('array');
var slideCounter = $(this).closest("[id^=carousel]").data('counter');
slideCounter = dataArray.length;
The slideCounter returns the length of the string, not the array elements. How can I tell this code to refer to a particular array? See the fiddle for a better idea of the markup and code: jsFiddle
I have no doubt that there is a better approach. I'm relatively new to front end work, I'd appreciate any insights, I've burnt some brain cells on this, thanks!
From looking at your HTML, it looks like when you do this:
var dataArray = $(this).closest("[id^=carousel]").data('array');
what you're trying to do is to read the name of an array with .data() and then somehow turn that name (which is a string) into the array that's in your variable. My guess is that there's probably a better way to structure your code rather than putting javascript variable names in your HTML. I'd probably put a key name in the HTML and then store the arrays in an object where you can access them by that key name at any time.
Without trying to refactor your code, here's an idea for what you were trying to accomplish:
If selectedSlidesIdArray1 is a global variable, then you can do this:
var dataArray = window[$(this).closest("[id^=carousel]").data('array')];
Using the [stringVariable] notation on an object, lets you access a property by a literal string or a variable that contains a string. Since all global variables are also properties on the window object, you can do it this way for global variables.
If selectedSlidesIdArray1 is not a global variable, then you should probably put it in an object and then you can do this:
var dataArray = yourObj[$(this).closest("[id^=carousel]").data('array')];
Instead of trying to translate an arbitrary string into a JavaScript variable of the same name, why not just use another array? You can have nested arrays, which is to say an array of arrays.
Thus, instead of selectedSlidesIdArray1, selectedSlidesIdArray2, etc., you would have one selectedSlidesIdArray with sub-arrays, which you could then pull the index for using a data attribute.