> 웹 프론트엔드 > 프런트엔드 Q&A > jquery json 배열 수정

jquery json 배열 수정

PHPz
풀어 주다: 2023-05-14 11:14:09
원래의
594명이 탐색했습니다.

프런트엔드 개발에서는 JSON 배열을 수정하고 조작해야 하는 시나리오를 자주 접하게 됩니다. jQuery는 이를 매우 효과적으로 달성하는 데 도움이 될 수 있습니다. 이 기사에서는 jQuery를 사용하여 JSON 배열을 수정하는 방법을 소개합니다.

  1. JSON 배열 가져오기

먼저 JSON 배열을 가져와야 합니다. JSON 배열을 직접 정의하거나 Ajax 요청을 통해 서버에서 반환된 JSON 배열을 얻을 수 있습니다.

서버 측에서 다음 JSON 배열을 얻었다고 가정해 보겠습니다.

var users = [
  {
    "name": "张三",
    "age": 20,
    "gender": "male"
  },
  {
    "name": "李四",
    "age": 25,
    "gender": "female"
  },
  {
    "name": "王五",
    "age": 30,
    "gender": "male"
  }
];
로그인 후 복사
  1. JSON 배열의 요소 수정

JSON 배열을 탐색하여 조건에 따라 수정할 요소를 찾을 수 있습니다.

다음 예에서는 25세인 사용자의 나이를 30세로 변경하는 방법을 보여줍니다.

$.each(users, function(index, user) {
  if(user.age === 25) {
    user.age = 30;
  }
});
로그인 후 복사
  1. Add new elements to the JSON array

푸시를 통해 JSON 배열에 새 요소를 추가할 수 있습니다. () 방법 .

다음 예에서는 JSON 배열에 새 사용자를 추가하는 방법을 보여줍니다.

var newUser = {
  "name": "赵六",
  "age": 28,
  "gender": "male"
};
users.push(newUser);
로그인 후 복사
  1. JSON 배열에서 요소 제거

JSON 배열을 탐색하고 조건에 따라 삭제할 요소를 찾은 다음, splice() 메서드를 사용하면 JSON 배열에서 요소가 제거됩니다.

다음 예에서는 25세 사용자를 삭제하는 방법을 보여줍니다.

$.each(users, function(index, user) {
  if(user.age === 25) {
    users.splice(index, 1);
  }
});
로그인 후 복사
  1. JSON 배열을 JSON 문자열로 변환

JSON 배열을 수정한 후에는 일반적으로 서버로 보내고 처리한 후 반환해야 합니다. 이 시점에서는 JSON 배열을 JSON 문자열로 변환해야 합니다.

JSON.stringify() 메서드를 사용하여 JSON 배열을 JSON 문자열로 변환할 수 있습니다:

var usersString = JSON.stringify(users);
로그인 후 복사
  1. JSON 문자열을 JSON 배열로 변환

서버에서 JSON 문자열을 받으면 다음 작업이 필요합니다. 변환 수정 작업은 JSON 배열로 변환한 후에만 수행할 수 있습니다.

JSON.parse() 메서드를 사용하여 JSON 문자열을 JSON 배열로 변환할 수 있습니다.

var usersString = '[{"name":"张三","age":20,"gender":"male"},{"name":"李四","age":25,"gender":"female"},{"name":"王五","age":30,"gender":"male"}]';
var users = JSON.parse(usersString);
로그인 후 복사

위는 jQuery를 사용하여 JSON 배열을 수정하는 방법입니다. 위의 작업을 통해 JSON 배열을 쉽게 수정하고 운영할 수 있어 보다 유연한 프런트엔드 개발이 가능해집니다.

위 내용은 jquery json 배열 수정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿