jQuery를 사용하여 JavaScript 객체에서 항목 추가 / 제거

다음과 같은 JavaScript 개체가 있습니다.

var data = {items: [
    {id: "1", name: "Snatch", type: "crime"},
    {id: "2", name: "Witches of Eastwick", type: "comedy"},
    {id: "3", name: "X-Men", type: "action"},
    {id: "4", name: "Ordinary People", type: "drama"},
    {id: "5", name: "Billy Elliot", type: "drama"},
    {id: "6", name: "Toy Story", type: "children"}
]};

이 목록에 항목을 추가 / 제거하려면 jQuery를 사용하여 어떻게해야합니까? 클라이언트는이 목록을 동적으로 수정할 수 있기를 원합니다.

먼저, 인용 된 코드는 JSON 이 아닙니다 . 코드는 JavaScript 개체 리터럴 표기법입니다. JSON 은 더 쉬운 구문 분석을 위해 설계된 하위 집합입니다.

코드는 오브젝트 (정의 data배열 (함유) items객체) (AN 각각 id, name, 및 type).

이를 위해 jQuery가 필요하거나 필요하지 않으며 JavaScript 만 있으면됩니다.

항목 추가 :

data.items.push(
    {id: "7", name: "Douglas Adams", type: "comedy"}
);

그것은 끝에 추가됩니다. 중간에 추가하려면 아래를 참조하십시오.

항목 제거 :

여러 가지 방법이 있습니다. 이 splice방법은 가장 다양합니다.

data.items.splice(1, 3); // Removes three items starting with the 2nd,
                         // ("Witches of Eastwick", "X-Men", "Ordinary People")

splice 원래 배열을 수정하고 제거한 항목의 배열을 반환합니다.

중간에 추가 :

splice실제로 추가와 제거를 모두 수행합니다. splice메서드 의 서명 은 다음과 같습니다.

removed_items = arrayObject.splice(index, num_to_remove[, add1[, add2[, ...]]]);

• index -변경을 시작할 인덱스
• num_to_remove -해당 색인으로 시작하여이 많은 항목을 제거하십시오.
• addN -... 다음 요소 삽입

따라서 다음과 같이 세 번째 위치에 항목을 추가 할 수 있습니다.

data.items.splice(2, 0,
    {id: "7", name: "Douglas Adams", type: "comedy"}
);

의미 : 인덱스 2에서 시작하여 0 개 항목을 제거한 후 다음 항목을 삽입합니다. 결과는 다음과 같습니다.

var data = {items: [
    {id: "1", name: "Snatch", type: "crime"},
    {id: "2", name: "Witches of Eastwick", type: "comedy"},
    {id: "7", name: "Douglas Adams", type: "comedy"},     // <== The new item
    {id: "3", name: "X-Men", type: "action"},
    {id: "4", name: "Ordinary People", type: "drama"},
    {id: "5", name: "Billy Elliot", type: "drama"},
    {id: "6", name: "Toy Story", type: "children"}
]};

일부를 제거하고 한 번에 추가 할 수 있습니다.

data.items.splice(1, 3,
    {id: "7", name: "Douglas Adams", type: "comedy"},
    {id: "8", name: "Dick Francis", type: "mystery"}
);

... 즉, 인덱스 1에서 시작하여 세 항목을 제거한 다음이 두 항목을 추가합니다. 결과 :

var data = {items: [
    {id: "1", name: "Snatch", type: "crime"},
    {id: "7", name: "Douglas Adams", type: "comedy"},
    {id: "8", name: "Dick Francis", type: "mystery"},
    {id: "4", name: "Ordinary People", type: "drama"},
    {id: "5", name: "Billy Elliot", type: "drama"},
    {id: "6", name: "Toy Story", type: "children"}
]};

스플 라이스 는 좋은데 모두가 스플 라이스를 설명해 주니까 설명하지 않았습니다. JavaScript에서 키워드 삭제 를 사용할 수도 있습니다 . 당신이 사용할 수있는 $를 .grep 이 사용 jQuery를 조작 할 수도.

jQuery 방식 :

data.items = jQuery.grep(
                data.items, 
                function (item,index) { 
                  return item.id !=  "1"; 
                });

방법 삭제 :

delete data.items[0]

PUSH를 추가하는 것은 접속이 무거운 기능이기 때문에 접속이 더 좋습니다. Splice는 새로운 배열을 생성합니다. 배열 크기가 크면 문제가 될 수 있습니다. delete는 때때로 유용합니다. 삭제 후 배열의 길이를 찾으면 길이에 변화가 없습니다. 따라서 현명하게 사용하십시오.

jQuery를 사용하는 경우 확장 기능을 사용하여 새 항목을 추가 할 수 있습니다.

var olddata = {"fruit":{"apples":10,"pears":21}};

var newdata = {};
newdata['vegetables'] = {"carrots": 2, "potatoes" : 5};

$.extend(true, olddata, newdata);

그러면 다음이 생성됩니다.

{"fruit":{"apples":10,"pears":21}, "vegetables":{"carrots":2,"potatoes":5}};

그것은 JSON이 아니라 자바 스크립트 객체 일뿐입니다. JSON 은 Javascript 구문의 하위 집합을 사용하는 데이터의 텍스트 표현입니다.

jQuery를 사용하여 JSON을 조작하는 것에 대한 정보를 찾을 수없는 이유는 jQuery가 그렇게 할 수있는 것이없고 일반적으로 전혀 수행되지 않기 때문입니다. Javascript 객체의 형태로 데이터를 조작 한 다음 필요한 경우 JSON 문자열로 변환합니다. (그러나 jQuery에는 변환 방법이 있습니다.)

가지고있는 것은 단순히 배열을 포함하는 객체이므로 이미 가지고있는 모든 지식을 사용할 수 있습니다. 그냥 사용하는 data.items배열에 액세스 할 수 있습니다.

예를 들어 동적 값을 사용하여 배열에 다른 항목을 추가하려면 :

// The values to put in the item
var id = 7;
var name = "The usual suspects";
var type = "crime";
// Create the item using the values
var item = { id: id, name: name, type: type };
// Add the item to the array
data.items.push(item);

json 배열에 객체 추가

var arrList = [];
var arr = {};   
arr['worker_id'] = worker_id;
arr['worker_nm'] = worker_nm;
arrList.push(arr);

JSON에서 객체 제거

그것은 나를 위해 일합니다.

  arrList = $.grep(arrList, function (e) { 

        if(e.worker_id == worker_id) {
            return false;
        } else {
            return true;
        }
    });

해당 객체가없는 배열을 반환합니다.

도움이 되었기를 바랍니다.

글쎄, 그것은 단지 자바 스크립트 객체이므로 data.items일반적인 배열처럼 조작 할 수 있습니다 . 당신이 할 경우 :

data.items.pop();

당신의 items배열은 1 개 항목이 짧아집니다.

간단하게 :)

var my_form_obj = {};
my_form_obj.name = "Captain America";
my_form_obj.weapon = "Shield";

도움이 되었기를 바랍니다!

시험

data.items.pop();
data.items.push({id: "7", name: "Matrix", type: "adult"});

var data = {items: [
    {id: "1", name: "Snatch", type: "crime"},
    {id: "2", name: "Witches of Eastwick", type: "comedy"},
    {id: "3", name: "X-Men", type: "action"},
    {id: "4", name: "Ordinary People", type: "drama"},
    {id: "5", name: "Billy Elliot", type: "drama"},
    {id: "6", name: "Toy Story", type: "children"}
]};

data.items.pop();
data.items.push({id: "7", name: "Matrix", type: "adult"});

console.log(data);