js jquery json 获取key对应的内容-CFANZ编程社区

JavaScript, jQuery, JSON 获取 key 对应的内容

介绍

在前端开发过程中，经常需要从 JSON 数据中获取特定 key 对应的内容，然后根据需要进行处理。本文将介绍如何使用 JavaScript、jQuery 和 JSON 实现这一功能，并提供代码示例供参考。

JSON 简介

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，常用于前后端数据传输和存储。它使用键值对的方式存储数据，数据类型包括对象、数组、字符串、数字、布尔值和 null。

JSON 示例：

{
  "name": "John",
  "age": 25,
  "city": "New York"
}

JavaScript 获取 JSON 中的 key 对应的内容

JavaScript 提供了多种方式获取 JSON 数据中特定 key 对应的内容。下面介绍两种常用的方法。

方法一：使用点号（.）访问对象属性

当 JSON 数据以对象形式存在时，可以使用点号（.）直接访问对象的属性。示例代码如下：

const jsonText = '{"name":"John","age":25,"city":"New York"}';
const person = JSON.parse(jsonText);

console.log(person.name); // 输出：John
console.log(person.age); // 输出：25
console.log(person.city); // 输出：New York

方法二：使用方括号（[]）访问对象属性

除了使用点号访问对象属性外，还可以使用方括号（[]）来获取 JSON 数据中的属性。这种方式在属性名不确定或包含特殊字符时非常有用。示例代码如下：

const jsonText = '{"name":"John","age":25,"city":"New York"}';
const person = JSON.parse(jsonText);

console.log(person['name']); // 输出：John
console.log(person['age']); // 输出：25
console.log(person['city']); // 输出：New York

jQuery 获取 JSON 中的 key 对应的内容

jQuery 是一个流行的 JavaScript 库，它简化了 JavaScript 操作和处理 HTML 文档、处理事件以及执行动画等任务。当使用 jQuery 时，可以使用 $.getJSON() 方法获取包含 JSON 数据的文件，并通过遍历对象属性的方式获取特定 key 对应的内容。

示例代码如下：

$.getJSON('data.json', function(data) {
  console.log(data.name); // 输出：John
  console.log(data.age); // 输出：25
  console.log(data.city); // 输出：New York
});