如何在JavaScript中获取含@特殊字符的JSON键值？

爬取新闻网站文章数据时遇到两个问题：

1. 获取到的JSON数据中多数键以@字符开头（如"@context": "value"），JavaScript点语法无法获取这类特殊字符开头的键值；
2. 编写的getArticle函数用$.ajax异步请求API，无法正确返回JSON数据。
   希望能解决这些问题，成功获取带特殊字符的键值。

原代码 #

function getArticle(url){
    URL = 'http://127.0.0.1:5000/defensedaily'
    $.ajax({
        method:"GET",
        beforeSend: function(request) {
            request.setRequestHeader("url", url);
            },
        url: URL,
        success:function(response){
            Response = response
            console.log(Response)
            return(Response)
        }
    })
}

var json = getArticle("http://defensedaily.com/congress-sends-fy-23-omnibus-with-858-billion-for-defense-to-presidents-desk/congress/")
console.log(json.url)

一、解决异步请求无法返回数据的问题 #

原函数里$.ajax是异步操作，success回调中的return不会把数据返回给函数调用者——因为异步代码执行时，函数已经先返回了undefined。解决方式是用Promise包装异步请求，配合async/await或.then()处理返回结果。

修改后的getArticle函数：

function getArticle(url){
    const API_URL = 'http://127.0.0.1:5000/defensedaily';
    return new Promise((resolve, reject) => {
        $.ajax({
            method: "GET",
            beforeSend: function(request) {
                request.setRequestHeader("url", url);
            },
            url: API_URL,
            success: function(response){
                resolve(response); // 请求成功时传递数据
            },
            error: function(error){
                reject(error); // 请求失败时传递错误信息
            }
        })
    });
}

调用示例（两种方式二选一）：

// 方式1：用async/await（更直观）
async function fetchAndProcessArticle() {
    try {
        const jsonData = await getArticle("http://defensedaily.com/congress-sends-fy-23-omnibus-with-858-billion-for-defense-to-presidents-desk/congress/");
        // 后续处理数据
        console.log(jsonData);
    } catch (err) {
        console.error('请求失败:', err);
    }
}
fetchAndProcessArticle();

// 方式2：用.then()链式调用
getArticle("http://defensedaily.com/congress-sends-fy-23-omnibus-with-858-billion-for-defense-to-presidents-desk/congress/")
    .then(jsonData => {
        console.log(jsonData);
    })
    .catch(err => {
        console.error('请求失败:', err);
    });

二、解决特殊字符开头键值的获取问题 #

JavaScript中，当对象键名包含特殊字符（如@、-、空格）时，不能使用点语法（obj.key），必须用方括号语法（obj['key-name']）。

示例获取特殊键值：

// 假设已经拿到返回的jsonData
const context = jsonData['@context']; // 获取@context的值
const firstArticle = jsonData['@graph'][0]; // 取@graph数组中第一个元素（文章主体）
const articleHeadline = firstArticle['headline']; // 获取文章标题
const authorName = firstArticle['author']['name']; // 获取作者名
const articleId = firstArticle['@id']; // 获取@id的值

console.log('@context:', context);
console.log('文章标题:', articleHeadline);
console.log('作者:', authorName);

完整可运行代码 #

function getArticle(url){
    const API_URL = 'http://127.0.0.1:5000/defensedaily';
    return new Promise((resolve, reject) => {
        $.ajax({
            method: "GET",
            beforeSend: function(request) {
                request.setRequestHeader("url", url);
            },
            url: API_URL,
            success: function(response){
                resolve(response);
            },
            error: function(error){
                reject(error);
            }
        })
    });
}

async function processArticleData() {
    try {
        const articleData = await getArticle("http://defensedaily.com/congress-sends-fy-23-omnibus-with-858-billion-for-defense-to-presidents-desk/congress/");
        
        // 提取需要的数据
        const schemaContext = articleData['@context'];
        const mainArticle = articleData['@graph'].find(item => item['@type'] === 'Article');
        const headline = mainArticle['headline'];
        const author = mainArticle['author']['name'];
        const publishDate = mainArticle['datePublished'];

        console.log('Schema上下文:', schemaContext);
        console.log('文章标题:', headline);
        console.log('作者:', author);
        console.log('发布时间:', publishDate);
    } catch (err) {
        console.error('数据获取失败:', err);
    }
}

processArticleData();

内容的提问来源于stack exchange，提问作者Caminero