Как изменить значение объекта, находящегося внутри массива с помощью JavaScript или jQuery?
Ниже приведен код jQuery UI Autocomplete:
var projects = [
{
value: "jquery",
label: "jQuery",
desc: "the write less, do more, JavaScript library",
icon: "jquery_32x32.png"
},
{
value: "jquery-ui",
label: "jQuery UI",
desc: "the official user interface library for jQuery",
icon: "jqueryui_32x32.png"
},
{
value: "sizzlejs",
label: "Sizzle JS",
desc: "a pure-JavaScript CSS selector engine",
icon: "sizzlejs_32x32.png"
}
];
Например, я хочу изменить значение desc jquery-ui. Как я могу это сделать?
Кроме того, есть ли более быстрый способ получить данные? Я имею в виду дать объекту имя для извлечения его данных, как и объект внутри массива? Так что это было бы как jquery-ui.jquery-ui.desc = ....
Ответы
Ответ 1
Вам нужно искать в массиве, например:
function changeDesc( value, desc ) {
for (var i in projects) {
if (projects[i].value == value) {
projects[i].desc = desc;
break; //Stop this loop, we found it!
}
}
}
и используйте его как
var projects = [ ... ];
changeDesc ( 'jquery-ui', 'new description' );
UPDATE:
Чтобы сделать это быстрее:
var projects = {
jqueryUi : {
value: 'lol1',
desc: 'lol2'
}
};
projects.jqueryUi.desc = 'new string';
(В соответствии с комментарием Фредерика вы не должны использовать дефис в ключе объекта, или вы должны использовать обозначения "jquery-ui" и projects [ "jquery-ui" ].)
Ответ 2
Это довольно просто
- Найдите индекс объекта с помощью метода
findIndex
.
- Сохранить индекс в переменной.
- Сделайте следующее следующее обновление:
yourArray[indexThatyouFind]
//Initailize array of objects.
let myArray = [
{id: 0, name: "Jhon"},
{id: 1, name: "Sara"},
{id: 2, name: "Domnic"},
{id: 3, name: "Bravo"}
],
//Find index of specific object using findIndex method.
objIndex = myArray.findIndex((obj => obj.id == 1));
//Log object to Console.
console.log("Before update: ", myArray[objIndex])
//Update object name property.
myArray[objIndex].name = "Laila"
//Log object to console again.
console.log("After update: ", myArray[objIndex])
Ответ 3
Вы можете использовать $. each() для итерации по массиву и поиска интересующего вас объекта:
$.each(projects, function() {
if (this.value == "jquery-ui") {
this.desc = "Your new description";
}
});
Ответ 4
ES6 кстати, без мутации оригинальных данных.
var projects = [
{
value: "jquery",
label: "jQuery",
desc: "the write less, do more, JavaScript library",
icon: "jquery_32x32.png"
},
{
value: "jquery-ui",
label: "jQuery UI",
desc: "the official user interface library for jQuery",
icon: "jqueryui_32x32.png"
}];
//find the index of object from array that you want to update
const objIndex = projects.findIndex(obj => obj.value === 'jquery-ui');
// make new object of updated object.
const updatedObj = { ...projects[objIndex], desc: 'updated desc value'};
// make final new array of objects by combining updated object.
const updatedProjects = [
...projects.slice(0, objIndex),
updatedObj,
...projects.slice(objIndex + 1),
];
console.log("original data=", projects);
console.log("updated data=", updatedProjects);
Ответ 5
Лучшее решение благодаря ES6.
Это возвращает новый массив с замененным описанием для объекта, который содержит значение, равное "jquery-ui".
const newProjects = projects.map(p =>
p.value === 'jquery-ui'
? { ...p, desc: 'new description' }
: p
);
Ответ 6
Это легко можно выполнить с помощью библиотеки подчеркивания /lodash:
_.chain(projects)
.find({value:"jquery-ui"})
.merge({desc: "new desc"});
Документы:
https://lodash.com/docs#find
https://lodash.com/docs#merge
Ответ 7
вы можете использовать .find, поэтому в вашем примере
var projects = [
{
value: "jquery",
label: "jQuery",
desc: "the write less, do more, JavaScript library",
icon: "jquery_32x32.png"
},
{
value: "jquery-ui",
label: "jQuery UI",
desc: "the official user interface library for jQuery",
icon: "jqueryui_32x32.png"
},
{
value: "sizzlejs",
label: "Sizzle JS",
desc: "a pure-JavaScript CSS selector engine",
icon: "sizzlejs_32x32.png"
}
];
let project = projects.find((p) => {
return p.value === 'jquery-ui';
});
project.desc = 'your value'
Ответ 8
вам нужно знать индекс объекта, который вы меняете. то его довольно простой
projects[1].desc= "new string";
Ответ 9
// using higher-order functions to avoiding mutation
var projects = [
{
value: "jquery",
label: "jQuery",
desc: "the write less, do more, JavaScript library",
icon: "jquery_32x32.png"
},
{
value: "jquery-ui",
label: "jQuery UI",
desc: "the official user interface library for jQuery",
icon: "jqueryui_32x32.png"
},
{
value: "sizzlejs",
label: "Sizzle JS",
desc: "a pure-JavaScript CSS selector engine",
icon: "sizzlejs_32x32.png"
}
];
// using higher-order functions to avoiding mutation
index = projects.findIndex(x => x.value === 'jquery-ui');
[... projects.slice(0,index), {'x': 'xxxx'}, ...projects.slice(index + 1, projects.length)];
Ответ 10
Использование карты - лучшее решение без использования дополнительных библиотек. (С использованием ES6)
const state = [
{
userId: 1,
id: 100,
title: "delectus aut autem",
completed: false
},
{
userId: 1,
id: 101,
title: "quis ut nam facilis et officia qui",
completed: false
},
{
userId: 1,
id: 102,
title: "fugiat veniam minus",
completed: false
},
{
userId: 1,
id: 103,
title: "et porro tempora",
completed: true
}]
const newState = state.map(obj =>
obj.id === "101" ? { ...obj, completed: true } : obj
);
Ответ 11
Я думаю, что так лучше
const index = projects.findIndex(project => project.value==='jquery-ui');
projects[index].desc = "updated desc";
Ответ 12
Вы можете использовать функцию карты -
const answers = this.state.answers.map(answer => {
if(answer.id === id) return { id: id, value: e.target.value }
return answer
})
this.setState({ answers: answers })
Ответ 13
Попробуйте этот код. он использует функцию jQuery grep
array = $.grep(array, function (a) {
if (a.Id == id) {
a.Value= newValue;
}
return a;
});
Ответ 14
Мы также можем использовать функцию отображения массива для изменения объекта массива с помощью Javascript.
function changeDesc(value, desc){
projects.map((project) => project.value == value ? project.desc = desc : null)
}
changeDesc('jquery', 'new description')
Ответ 15
Сначала найдите индекс:
function getIndex(array, key, value) {
var found = false;
var i = 0;
while (i<array.length && !found) {
if (array[i][key]==value) {
found = true;
return i;
}
i++;
}
}
Тогда:
console.log(getIndex($scope.rides, "_id", id));
Затем сделайте то, что хотите, с этим индексом, например:
$scope [returnindex].someKey = "someValue";
Примечание: пожалуйста, не используйте для, так как for проверит все документы массива, используйте в то время как с пробкой, поэтому он остановится, как только он будет найден, тем самым ускорит код.
Ответ 16
Здесь я использую угловой JS. В JavaScript вы можете использовать для цикла, чтобы найти.
if($scope.bechval>0 &&$scope.bechval!=undefined)
{
angular.forEach($scope.model.benhmarkghamlest, function (val, key) {
$scope.model.benhmarkghamlest[key].bechval = $scope.bechval;
});
}
else {
alert("Please sepecify Bechmark value");
}
Ответ 17
учитывая следующие данные, мы хотим заменить ягоды в летнем списке фруктов на арбуз.
const summerFruits = [
{id:1,name:'apple'},
{id:2, name:'orange'},
{id:3, name: 'berries'}];
const fruit = {id:3, name: 'watermelon'};
Two ways you can do this.
First approach:
//create a copy of summer fruits.
const summerFruitsCopy = [...summerFruits];
//find index of item to be replaced
const targetIndex = summerFruits.findIndex(f=>f.id===3);
//replace the object with a new one.
summerFruitsCopy[targetIndex] = fruit;
Second approach: using map, and spread
const summerFruitsCopy = summerFruits.map(fruitItem =>
fruitItem .id === fruit.id ?
{...summerFruits, ...fruit} : fruitItem );
список summerFruitsCopy теперь будет возвращать массив с обновленным объектом.
Ответ 18
для обновления нескольких элементов с использованием совпадений:
_.chain(projects).map(item => {
item.desc = item.value === "jquery-ui" ? "new desc" : item.desc;
return item;
})
Ответ 19
Это мой ответ на проблему. Моя версия для подчеркивания была 1.7, поэтому я не мог использовать .findIndex
.
Поэтому я вручную получил индекс предмета и заменил его. Вот код для того же.
var students = [
{id:1,fName:"Ajay", lName:"Singh", age:20, sex:"M" },
{id:2,fName:"Raj", lName:"Sharma", age:21, sex:"M" },
{id:3,fName:"Amar", lName:"Verma", age:22, sex:"M" },
{id:4,fName:"Shiv", lName:"Singh", age:22, sex:"M" }
]
Метод ниже заменит студента с id:4
с большим количеством атрибутов в объекте
function updateStudent(id) {
var indexOfRequiredStudent = -1;
_.each(students,function(student,index) {
if(student.id === id) {
indexOfRequiredStudent = index; return;
}});
students[indexOfRequiredStudent] = _.extend(students[indexOfRequiredStudent],{class:"First Year",branch:"CSE"});
}
С подчеркиванием 1.8 это будет упрощено, так как у нас есть методы _.findIndexOf
.