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

jQuery를 사용하여 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이 아닙니다.코드는 자바스크립트 객체 문자 표기입니다.JSON은 구문 분석을 더 쉽게 하기 위해 설계된 부분 집합입니다.

코드가 개체를 정의합니다(data배열 포함()items객체(각각 하나씩 포함)id,name,그리고.type).

jQuery가 필요하거나 필요하지 않고 자바스크립트만 있으면 됩니다.

항목 추가:

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

그것이 끝을 더하는군요.중간에 추가하는 방법은 아래를 참고하세요.

항목 제거:

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

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에서 시작하여 제로 아이템을 제거하고 다음 아이템을 삽입합니다.결과는 다음과 같습니다.

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

스플라이스는 맛있습니다, 다들 스플라이스에 대해 설명을 해주시니까 제가 설명을 안 해드렸어요.자바스크립트에서도 delete 키워드를 사용할 수 있는데 좋습니다.$.grep을 사용하여 jQuery를 사용하여 이를 조작할 수도 있습니다.

jQuery Way:

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

DELETE 방법:

delete data.items[0]

스플라이스는 중량이 큰 함수이므로 PUSH를 추가하는 것이 스플라이스가 더 좋습니다.스플라이스가 새 배열을 생성합니다. 배열 크기가 크면 문제가 생길 수 있습니다.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은 자바스크립트 구문의 부분 집합을 사용하는 데이터의 텍스트 표현입니다.

jQuery를 사용하여 JSON을 조작하는 것에 대한 정보를 찾을 수 없는 이유는 jQuery가 그렇게 할 수 있는 것이 없고, 일반적으로 전혀 이루어지지 않기 때문입니다.자바스크립트 객체 형태로 데이터를 조작한 후 필요한 경우 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);

언급URL : https://stackoverflow.com/questions/4538269/adding-removing-items-from-a-javascript-object-with-jquery