다음과 같은 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";
도움이 되었기를 바랍니다!