We Keep Coding

I want to make each of my individual arrays correspond to an image

I am trying to create a "Food Selector" project and I'm a little stumped. I want to add a little more style with each individual array elements. I don't want to replace my array elements with the image. Maybe just add an event listener that will upload an image simultaneously with the element. When the button is clicked it will show the array words, but also show a image of my choosing at the bottom of the screen
I've tried a couple things, but my last attempt was trying to target the array index and make it equal the CSS/Style that I want it to correspond with.. And that came to no avail ;-;
let close = ["Chipotle", "Wendy's", "Pollo Tropical", "Wings and Things", "Subway", "Sonic's", "Culvers", "Publix", "Chic Fil A"];
let healthy = ["Chipotle", "Subway", "Chic Fil A", "Smoothie"];
let dine = ["LongHorn", "Hooters", "Cheddars", "Senju Ramen"];
// chip.addEventListener('change', () => {
// if()
// })
// close[1] = document.querySelector(".wendys");

Why not use an array of objects ? each element in the array is an object with the name and the image:
let close = [
{ name: "Chipotle", image: "" },
{ name: "Wendy's", image: "" },
// rest of your array here
];
close[0].name; // return "Chipotle" ;

const close = [{ "Chipotle", image: null }, { name: "Wendy's", image: null }]
close[0].name // Return "Chipotle"
close[0].image // Access image return null

Change id according to the number of objects in an array (javascript/jquery)

From a form I can insert "name", "surname", "age" and then I print them in a table immediately below the form.
Everytime I add a user, I append a row and I push every information in an array.
I have a variable called "idUser" that I use to give to each row a unique id: first row id=0, second row id=1, third row id=2 etc so each time I increment the "idUser" variable and I assign it to the new row.
Then I can edit and delete every row, but I don't know how to solve a problem:
for example I have 3 users, so I print
idUser=0 name surname age edit delete
idUser=1 name surname age edit delete
idUser=2 name surname age edit delete
and I have this array with 3 elements:
[{
"id": 0,
"name": name,
"surname": surname,
"age": age
},
{
"id": 1,
"name": name,
"surname": surname,
"age": age
},
{
"id": 2,
"name": name,
"surname": surname,
"age": age
},
]
If i delete the first row, I delete at the same time the first element in array. So the situation now is:
idUser=1 name surname age edit delete
idUser=2 name surname age edit delete
and the array:
[{
"id": 1,
"name": name,
"surname": surname,
"age": age
},
{
"id": 2,
"name": name,
"surname": surname,
"age": age
},
]
So I have a lot of problems: if I add a new user, the "idUser" increments so I'll have a new row with id=3
idUser=1 name surname age edit delete
idUser=2 name surname age edit delete
idUser=3 name surname age edit delete
but if I want to edit the row with idUser=3, I have an error, because I take the information from the array and copy them in the form fields (so I can edit them in the form), but the array has just 3 element (and I ask for the fourth element, because idUser=3, so 4th element in array)....also I should change the id of every object in array (the object in first position [0] has to have id:0, second object id:1). So when I delete something I need to update the id of all objects in array, id in each row and also the variable "idUser"..Idk how to update all this stuff at the same time..it isn't a problem of code, I just need an idea to solve it and how I should handle the id and variable "idUser"

You're using the id property like an index, which will indeed no longer work when you remove elements from your data array. Instead of modifying all data points once an item is removed, I would do one of two things:
Make a Map or object that references users by id
Make a function that finds a user object by id in an array.
For large data sets, I'd go with option 1. But for small arrays, you might as well use Array.prototype.find like so:
function getObjWithKeyValue(arr, key, value) {
return arr.find(function(item) {
return item[key] === value;
});
};
var data = [{id:1,name:"",surname:"",age:""},{id:2,name:"",surname:"",age:""}];
var personWithId1 = getObjWithKeyValue(data, "id", 1);
console.log(personWithId1);
The other approach, if you're interested:
var data = [{id:1,name:"",surname:"",age:""},{id:2,name:"",surname:"",age:""}];
var dataMap = data.reduce(function(map, d) {
map[d.id] = d;
return map;
}, {});
var userWithId1 = dataMap[1];
console.log(userWithId1);

Updating array used by ng-options, refresh selected object

In angular the use of Track by to track selection by value instead of by reference is a nice feature if needed. But lets say I switch the array behind and the selected object id matches a new Id I want the select to change as well
How do I force it to reevaluate?
HTML:
<select ng-options="option.id for option in collection track by option.id" ng-model="selectedObject"></select>
<button ng-click="updateCollection()">Update</button>
JS:
$scope.collection = [{
id: 1,
value: 0
}, {
id: 2,
value: 0
}, {
id: 3,
value: 0
}];
$scope.selectedObject = $scope.collection[0];
$scope.updateCollection = function () {
var newColl = [{
id: 1,
value: 100
}, {
id: 2,
value: 200
}, {
id: 3,
value: 300
}];
$scope.collection = newColl;
Lets say I pick Id 2 and then update the selectedObject is still the old id:2 value:0, I want it to change straight into id:2 value:200.
https://jsfiddle.net/IngoVals/p4ye3uaq/
P.S. Why doesn't the angular.copy work in the fiddle?

when you pick Id 2 then option model selectedObject is the second object of the collection which has Id of 2.
Then you press the update button and change $scope.collection at this point optoins will change in the select box, but the selected value is never changed, its still reference to the second object of the previous $scope.collection. so you need to update the selected value as well to do that,
get the selected object's index as,
var selectedIndex = $scope.collection.indexOf($scope.selectedObject);
assign the new collection as you did,
$scope.collection = newColl;
finally update the selectedObject based on that previously selected object's index.
$scope.selectedObject = $scope.collection[selectedIndex];
here is the DEMO

AngularJS: add, remove and reorder items controlled by array

I have an ng-repeat in a table. There are several of these tables inside a larger table. Each row has buttons for "add another" (which I have working) and remove current row/move row up-down (which I don't).
They are created with an array, each group in the table has its own array, with one member to start.
vm.choices1 = [{ id: 'choice1' }];
vm.choices2 = [{ id: 'choice1' }];
vm.choices3 = [{ id: 'choice1' }];
Clicking the plus button passes the current array and pushes a new item onto it, thus adding a repeater.
vm.addNewChoice = function(arr) {
var newItemNo = arr.length + 1;
arr.push({
'id': 'choice' + newItemNo
});
};
This works fine. Of course, now I have been asked to add the delete button and up/down buttons.
I get in concept what I need to do: I suppose somehow when the delete button is clicked I need to pass that index number to a delete function and pop that index from the array thats passed:
vm.deleteChoice = function(arr) {
arr.splice(index, index+1); //??
};
But I'm not sure how to get and pass the clicked index to the function. I used to know how to do this in jQuery, but not in Angular. If I can get the index of the clicked item into my function, I'm sure I can figure out the u/down buttons from there too.
Basic punker: http://plnkr.co/edit/WPdnmYbDSXC0LsbeMduM?p=preview

The directive ng-repeat creates a scope for every item that it iterates through. Part of the data assigned to this scope is the attribute $index which will be equal to the index in the array of the item/object.
Source: https://docs.angularjs.org/api/ng/directive/ngRepeat

Adding items to a javascript array

I'm attempting to assign items to an array on a users action, so for example, user clicks "Add", this will add the selected id into the relevant section of the array.
The array won't be created at first so I set up an empty array:
var Options={};
On the users click, I then want to assign a key to match the option selected from a drop down so I can use this as a reference later on.
E.g. When the user clicks plus on a record, the option selected from a drop-down is 2. The id of the record they selected is say 5.
I'd like to structure my array like the following:-
[key e.g drop down option]
=> 'records' => array [record_id]
Each time the user clicks plus next to a record, the id is appended to the correct array based on the drop down selected option.
[option 1] => 'publication_date' = 12/09/2010, 'records' => [1, 2, 4]
[option 2] => 'publication_date' = 15/09/2010, 'records => [1, 3, 5]
etc, each option from the select box has a publication date and a series of records the user can assign to it.

You can do something like this:
function AddItem(key, value) {
if(Options[key]) Options[key].push(value);
else Options[key] = [value];
}
For example doing this:
​AddItem(2, 5);
AddItem(2, 6);
Would result in Options being:
{ 2: [5, 6] }
You can give it a try/play with it here.

An object in javascript is good to store a one key dataset not various keys.
ie:
var records = {'12/09/2010':[1, 2, 4], '15/09/2010':[1, 3, 5]}
To get the records for the 15/09: records['15/09/2010']
Add a new record for a date: records['15/09/2010'].push(6)
If the date change, you need to do something like:
records['17/09/2010'] = records['15/09/2010']; delete records['15/09/2010']
The user is not able to change both at the same time(date and add) and you should do both update actions separately.
Now if you plan to have more keys, you should use an array of objects:
var records = [
{publication_date:'12/09/2010', records:[1, 2, 4], ..., otherProp='...'},
...
];
And for each change, loop on the array, find the relevant item and change it.