Bagaimana cara mengubah nilai objek yang ada di dalam array menggunakan JavaScript atau jQuery?


201

Kode di bawah ini berasal dari 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"
    }
];

Misalnya, saya ingin mengubah desc dari jquery-ui . Bagaimana saya bisa melakukan itu?

Selain itu, adakah cara yang lebih cepat untuk mendapatkan data? Maksud saya memberi nama objek untuk mengambil datanya, sama seperti objek di dalam array? Jadi itu akan menjadi sesuatu sepertijquery-ui.jquery-ui.desc = ....


Anda harus mengubah array menjadi objek Javascript untuk menggunakan sintaks projects["jquery-ui"].desc. Apakah itu sepadan dengan usaha hanya untuk mendapatkan sintaksis yang lebih bagus?
Frédéric Hamidi

Saya telah memperbarui solusi saya dengan pertanyaan terakhir Anda. Dan Anda dapat menggunakan notasi "projects.jquery-ui.desc".
Aston

Jawaban:


135

Anda harus mencari di dalam array seperti:

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!
     }
   }
}

dan menggunakannya seperti

var projects = [ ... ];
changeDesc ( 'jquery-ui', 'new description' );

MEMPERBARUI:

Untuk mendapatkannya lebih cepat:

var projects = {
   jqueryUi : {
      value:  'lol1',
      desc:   'lol2'
   }
};

projects.jqueryUi.desc = 'new string';

(Menurut komentar Frédéric Anda tidak boleh menggunakan tanda hubung pada kunci objek, atau Anda harus menggunakan notasi "jquery-ui" dan proyek ["jquery-ui"].)


Apakah ada cara yang jauh lebih cepat untuk mendapatkan data? Maksudku memberikan objek nama untuk menjemput nya data.Just seperti objek di dalam array.So, saya bisa digunakan dengan cara yang: jquery-ui.jquery-ui.desc = ....
qinHaiXiang

2
pembaruan Anda tidak akan berfungsi karena tanda hubung -pada nama objek. Anda harus menulis "jquery-ui": {}dan projects["jquery-ui"].descmasing - masing.
Frédéric Hamidi

Terima kasih, saya tidak tahu itu.
Aston

lihat jawaban abe kur, itu benar, ini dan yang lainnya panjang
stackdave

231

Cukup sederhana

  • Temukan indeks objek menggunakan findIndexmetode.
  • Simpan indeks dalam variabel.
  • Lakukan pembaruan sederhana seperti ini: 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's name property.
myArray[objIndex].name = "Laila"

//Log object to console again.
console.log("After update: ", myArray[objIndex])


2
Ada alasan untuk double ()pada findIndexmetode ini?
Terkhos

3
itu akan bermutasi myArray.
Bimal Grg

1
Ya, tetapi jika Anda tidak ingin bermutasi. [...myArray.slice(0, objIndex), Object.assign({}, myArray[objIndex], myArray.slice(objIndex + 1))]
Umair Ahmed

1
@UmairAhmed Bukankah seharusnya kode di atas [...myArray.slice(0, objIndex), Object.assign({}, myArray[objIndex], ...myArray.slice(objIndex + 1))]? Saya pikir kamu kehilangan elips kedua.
Craig

1
suka betapa bersihnya ini!
tdelam

56

Cara ES6 , tanpa bermutasi data asli.

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);

54

Solusi terbaik, terima kasih kepada ES6.

Ini mengembalikan array baru dengan deskripsi yang diganti untuk objek yang berisi nilai sama dengan "jquery-ui".

const newProjects = projects.map(p =>
  p.value === 'jquery-ui'
    ? { ...p, desc: 'new description' }
    : p
);

1
Memang solusi aktual terbaik! Terima kasih.
Frederiko Cesar

1
@FrederikoCesar tidak dalam semua kasus, iterasi atas setiap objek lebih mahal daripada mengiris array dan menyuntikkan objek baru menggunakan operator spread
Maged Mohamed

bagaimana jika Anda ingin mengubah nilai dengan cepat? Tanpa membuat var lain? Cara terbaik adalah metode indeks: const targetIndex = summerFruits.findIndex (f => f.id === 3);
Thanasis

37

Anda dapat menggunakan $ .each () untuk beralih ke array dan menemukan objek yang Anda minati:

$.each(projects, function() {
    if (this.value == "jquery-ui") {
        this.desc = "Your new description";
    }
});

36

Menggunakan peta adalah solusi terbaik tanpa menggunakan perpustakaan tambahan. (Menggunakan 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
);

19

Ini dapat dengan mudah dilakukan dengan garis bawah / lodash library:

  _.chain(projects)
   .find({value:"jquery-ui"})
   .merge({desc: "new desc"});

Documents:
https://lodash.com/docs#find
https://lodash.com/docs#merge


Bagaimana jika 'jquery-ui' tidak ditemukan oleh fungsi find?
Mika

Properti 'menemukan' tidak ada pada jenis 'LoDashExplicitArrayWrapper'
AndrewBenjamin

Hasil dari sekuens semacam itu harus dibuka dengan nilai _ #. lodash.com/docs/4.17.4#chain .value()
p0k8_

17

Anda dapat menggunakan .find dalam contoh Anda

   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'

Luar biasa! +1
Mike Musni

12

Anda perlu tahu indeks objek yang Anda ubah. maka itu cukup sederhana

projects[1].desc= "new string";

8

Saya pikir cara ini lebih baik

const index = projects.findIndex(project => project.value==='jquery-ui');
projects[index].desc = "updated desc";

di Anda findIndexAnda memberikan nilai alih-alih membandingkan
avalanche1

6

mengingat data berikut, kami ingin mengganti beri dalam summerFruitsdaftar dengan semangka .

const summerFruits = [
{id:1,name:'apple'}, 
{id:2, name:'orange'}, 
{id:3, name: 'berries'}];

const fruit = {id:3, name: 'watermelon'};

Dua cara Anda bisa melakukan ini.

Pendekatan pertama:

//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;

Pendekatan kedua: menggunakan map, dan spread:

const summerFruitsCopy = summerFruits.map(fruitItem => 
fruitItem .id === fruit.id ? 
    {...summerFruits, ...fruit} : fruitItem );

summerFruitsCopy daftar sekarang akan mengembalikan array dengan objek yang diperbarui.


Metode pertama adalah yang terbaik. Tidak perlu pindah ke var lain lalu kembali. Metode on the fly. Saya memilih solusi Anda.
Thanasis

4

// 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)];


ini ...sebelum proyek diperlukan?
lazzy_ms

@ lazzy_ms ...dikenal sebagai operator spread. google it :)
rmcsharry

4

Ini adalah jawaban lain yang melibatkan find. Ini bergantung pada kenyataan bahwa find:

  • iterate melalui setiap objek dalam array SAMPAI ditemukan kecocokan
  • setiap objek disediakan untuk Anda dan DIUBAH

Berikut cuplikan penting Javascript:

projects.find( function (p) {
    if (p.value !== 'jquery-ui') return false;
    p.desc = 'your value';
    return true;
} );

Ini versi alternatif dari Javascript yang sama:

projects.find( function (p) {
    if (p.value === 'jquery-ui') {
        p.desc = 'your value';
        return true;
    }
    return false;
} );

Berikut ini versi yang lebih pendek (dan agak lebih jahat):

projects.find( p => p.value === 'jquery-ui' && ( p.desc = 'your value', true ) );

Ini versi lengkapnya:

  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"
            }
        ];

projects.find( p => p.value === 'jquery-ui' && ( p.desc = 'your value', true ) );

console.log( JSON.stringify( projects, undefined, 2 ) );


3

Anda dapat menggunakan fungsi peta -

const answers = this.state.answers.map(answer => {
  if(answer.id === id) return { id: id, value: e.target.value }
  return answer
})

this.setState({ answers: answers })

0

Coba kode ini. menggunakan fungsi jQuery grep

array = $.grep(array, function (a) {
    if (a.Id == id) {
        a.Value= newValue;
    }
    return a;
});

0

Kita juga dapat menggunakan fungsi peta Array untuk memodifikasi objek array menggunakan Javascript.

function changeDesc(value, desc){
   projects.map((project) => project.value == value ? project.desc = desc : null)
}

changeDesc('jquery', 'new description')

ini akan mengembalikan [null, objek dengan nilai yang diperbarui, null]
Fernando Caride

0

Temukan indeks terlebih dahulu:

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++;
        }
      }

Kemudian:

console.log(getIndex($scope.rides, "_id", id));

Kemudian lakukan apa yang Anda inginkan dengan indeks ini, seperti:

$ scope [returnsindex] .someKey = "someValue";

Catatan: tolong jangan gunakan untuk, karena untuk akan memeriksa semua dokumen array, gunakan sementara dengan stopper, jadi akan berhenti setelah ditemukan, sehingga kode lebih cepat.


0

Di sini saya menggunakan js sudut. Dalam javascript, Anda dapat menggunakan loop untuk menemukan.

    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");
    }

-1

untuk memperbarui beberapa item dengan penggunaan yang cocok:

_.chain(projects).map(item => {
      item.desc = item.value === "jquery-ui" ? "new desc" : item.desc;
      return item;
    })

-1

Ini tanggapan saya terhadap masalah tersebut. Versi garis bawah saya adalah 1,7 sehingga saya tidak bisa menggunakan .findIndex.

Jadi saya secara manual mendapatkan indeks item dan menggantinya. Berikut adalah kode yang sama.

 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" }
               ]

Metode di bawah ini akan menggantikan siswa id:4dengan lebih banyak atribut di objek

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"});           

}

Dengan garis bawah 1.8 itu akan disederhanakan karena kami memiliki metode _.findIndexOf.


-1

Biarkan Anda ingin memperbarui nilai array[2] = "data"

    for(i=0;i<array.length;i++){
      if(i == 2){
         array[i] = "data";
        }
    }

Apakah ini jawaban atau pertanyaan?
tabdiukov

2
Anda berhasil memperbarui item ke-2 dalam array itu dengan cara yang paling rumit.
BlueWater86

-1
let thismoth = moment(new Date()).format('MMMM');
months.sort(function (x, y) { return x == thismoth ? -1 : y == thismoth ? 1 : 0; });

1
Harap berikan deskripsi untuk jawaban Anda.
Lajos Arpad
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.