JavaScript 또는 jQuery를 사용하여 어레이 내에 있는 개체의 값을 변경하려면 어떻게 해야 합니까?

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

예를 들어 jquery-ui의 desc 값을 변경하고 싶습니다.내가 어떻게 그럴 수 있을까?

또한 데이터를 더 빨리 얻을 수 있는 방법이 있습니까?어레이 내의 객체처럼 오브젝트에 데이터를 가져오기 위한 이름을 붙이는 거죠?그러니까 이런 거기가...jquery-ui.jquery-ui.desc = ....

그것은 꽤 간단하다

• 다음을 사용하여 개체의 인덱스 찾기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's name property.
myArray[objIndex].name = "Laila"

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

다음과 같이 어레이 내에서 검색해야 합니다.

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

갱신:

신속한 도입 방법:

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

projects.jqueryUi.desc = 'new string';

(Frédéric의 코멘트에 따르면 오브젝트 키에 하이픈을 사용하지 않거나 "jquery-ui" 및 projects[jquery-ui] 표기법을 사용해야 합니다.)

ES6를 통한 최고의 솔루션

그러면 "jquery-ui"와 같은 값을 포함하는 개체에 대한 설명이 대체된 새 배열이 반환됩니다.

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

추가 라이브러리를 사용하지 않고 지도를 사용하는 것이 가장 좋은 해결책입니다.(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
);

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 sure to avoid incorrect replacement
// When specific item is not found
if (objIndex === -1) {
  return;
}

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

$.each()를 사용하여 어레이를 반복하여 원하는 개체를 찾을 수 있습니다.

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

이 예에서는 .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'

다음 데이터를 바탕으로, 우리는 베리를 교환하고 싶다.summerFruits수박과 함께 나열하다

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

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

두 가지 방법으로 할 수 있습니다.

첫 번째 접근법:

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

두 번째 접근법: 사용map,그리고.spread:

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

summerFruitsCopy이제 목록이 업데이트된 개체와 함께 어레이를 반환합니다.

언더스코어/로드시 라이브러리로 간단하게 실현할 수 있습니다.

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

문서:
https://lodash.com/docs#find
https://lodash.com/docs#merge

변경할 객체의 인덱스를 알아야 합니다.그럼 꽤 간단해

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

이것은 다음 질문에 대한 또 다른 답변입니다.find이것은, 「이것의 사실」에 근거하고 있습니다.find:

• 일치하는 항목이 발견될 때까지 어레이 내의 모든 개체를 반복합니다.
• 각 오브젝트는 사용자에게 제공되며 MODIFIAB입니다.LE

다음은 중요한 Javascript 스니펫입니다.

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

다음은 동일한 Javascript의 대체 버전입니다.

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

여기 더 짧은 버전이 있습니다(그리고 좀 더 사악한 버전).

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

다음은 완전한 작동 버전입니다.

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

이쪽이 좋을 것 같아요.

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

const users = [
  { name: "Alex", age: 25 },
  { name: "John", age: 32 },
];

const newUsers = users.map((user) => ({
  ...user,
  age: user.age + 5, // just for example
}));

// newUsers = [
// {name:"Alex" , age:30},
// {name:"John , age:37}
// ]

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

써보다forEach(item,index)도우미

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 search_to_change = 'jquery'

projects.forEach((item,index)=>{
   if(item.value == search_to_change )
      projects[index].desc = 'your description ' 
})

각 루프에 대해 사용하는 조건에 따라 값 변경

projects.forEach((p,index)=>{
    if(index === 1){
       p.value = "Updated jquery-ui"
    }
})

let users = [
    {id: 1, name: 'Benedict'},
    {id: 2, name: 'Myles'},
    {id: 3, name: 'Happy'},
]

 users.map((user, index) => {
 if(user.id === 1){
  users[index] = {id: 1, name: 'Baba Benny'};    
 }
 
 return user
})


console.log(users)

이 코드는 오브젝트 위에 매핑된 후 원하는 if 문과 일치시킵니다.

if(user.id === 1) 

어딘가에 일치하는 것이 있으면 인덱스를 사용하여 교환한다.

 users[index] = {id: 1, name: 'Baba Benny'};

어레이 내의 오브젝트를 반환한 후 변경된 어레이를 반환한다.

지도 기능을 사용할 수 있습니다.

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

this.setState({ answers: answers })

여기 멋지고 명쾌한 답이 있다.이게 100% 효과가 있을지 몰랐는데 괜찮은 것 같아요.이 경우 lib가 필요한지 알려주시기 바랍니다만, 필요 없을 것 같습니다.또, x브라우저로 동작하지 않는 경우는, 가르쳐 주세요.Chrome IE11로 시도해보니 모두 정상적으로 동작하는 것 같았습니다.

    var Students = [
        { ID: 1, FName: "Ajay", LName: "Test1", Age: 20},
        { ID: 2, FName: "Jack", LName: "Test2", Age: 21},
        { ID: 3, FName: "John", LName: "Test3", age: 22},
        { ID: 4, FName: "Steve", LName: "Test4", Age: 22}
    ]

    Students.forEach(function (Student) {
        if (Student.LName == 'Test1') {
            Student.LName = 'Smith'
        }
        if (Student.LName == 'Test2') {
            Student.LName = 'Black'
        }
    });

    Students.forEach(function (Student) {
        document.write(Student.FName + " " + Student.LName + "<BR>");
    });

출력은 다음과 같습니다.

에이제이 스미스

잭 블랙

John 테스트 3

스티브 테스트 4

수정 중에 조금 더 복잡한 코드를 실행하고 싶다고 가정하면, 3진 연산자 접근법에 대해 if-else 문을 사용할 수 있습니다.

// original 'projects' array;
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"
    }
];

// modify original 'projects' array, and save modified array into 'projects' variable
projects = projects.map(project => {
// When there's an object where key 'value' has value 'jquery-ui'
    if (project.value == 'jquery-ui') {

// do stuff and set a new value for where object's key is 'value'
        project.value = 'updated value';

// do more stuff and also set a new value for where the object's key is 'label', etc.
        project.label = 'updated label';

// now return modified object
        return project;
    } else {
// just return object as is
        return project;
    }
});

// log modified 'projects' array
console.log(projects);

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

어레이의 맵 기능을 사용하여 Javascript를 사용하여 어레이 오브젝트를 수정할 수도 있습니다.

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

changeDesc('jquery', 'new description')

자바스크립트 파괴의 힘

const projects = [
  {
    value: 'jquery',
    label: 'jQuery',
    desc: 'the write less, do more, JavaScript library',
    icon: 'jquery_32x32.png',
    anotherObj: {
      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',
  },
];

function createNewDate(date) {
  const newDate = [];
  date.map((obj, index) => {
    if (index === 0) {
      newDate.push({
        ...obj,
        value: 'Jquery??',
        label: 'Jquery is not that good',
        anotherObj: {
          ...obj.anotherObj,
          value: 'Javascript',
          label: 'Javascript',
          desc: 'Write more!!! do more!! with JavaScript',
          icon: 'javascript_4kx4k.4kimage',
        },
      });
    } else {
      newDate.push({
        ...obj,
      });
    }
  });

  return newDate;
}

console.log(createNewDate(projects));

먼저 인덱스를 찾습니다.

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

그런 다음 이 인덱스로 다음과 같이 원하는 작업을 수행합니다.

$140[disclindex]someKey = "someValue";

주의: 는 어레이 문서를 모두 체크하기 때문에 사용하지 마십시오.스토퍼와 함께 사용하므로 검출되면 정지되므로 코드가 고속화됩니다.

여기 angular js를 사용하고 있습니다.javascript에서는 loop을 사용하여 찾을 수 있습니다.

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

다음과 같은 특정 기능을 만든 후 필요에 따라 사용할 수 있습니다.

var each    = (arr, func) => 
                Array.from(
                    (function* (){
                        var i = 0;
                        for(var item of arr)
                            yield func(item, i++);
                    })()
                );

즐기세요.

upsert(array, item) { 
        const i = array.findIndex(_item => _item.id === item.id);
        if (i > -1) {
            let result = array.filter(obj => obj.id !== item.id);
            return [...result, item]
        }
        else {
            return [...array, item]
        };
    }

일치하는 항목을 여러 개 업데이트하려면 다음을 사용합니다.

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

이 코드를 사용해 보세요.jQuery grep 함수를 사용합니다.

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

을 사용하다에 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.을 사용하면 1.8이라는 방법이 됩니다._.findIndexOf.

언급URL : https://stackoverflow.com/questions/4689856/how-to-change-value-of-object-which-is-inside-an-array-using-javascript-or-jquer