JavaScript获取JSON值方法及动态图片标签获取JSON对象值方案

嘿，我来帮你搞定这两个JavaScript相关的问题，咱们一个一个来：

获取JSON值的方式分两种情况，取决于你拿到的是JSON字符串还是已经解析好的JavaScript对象：

• 如果是已解析的JavaScript对象（比如通过$.getJSON请求回来的响应，jQuery已经帮你解析好了），直接用点符号（.）或者方括号（[]）就能访问属性：

  // 假设jsonObjectList是你从getJSON拿到的数组
  const firstItem = jsonObjectList[0];
  console.log(firstItem.objMaterial); // 直接访问objMaterial属性
  // 如果属性名带特殊字符，用方括号方式
  console.log(firstItem['obj-material']);
  

• 如果是JSON格式的字符串，需要先通过JSON.parse()把它转换成JavaScript对象，再访问属性：

  const jsonString = '{"objMaterial": "oak-wood", "id": 5}';
  const jsonObj = JSON.parse(jsonString);
  console.log(jsonObj.objMaterial); // 输出 "oak-wood"
  

你遇到的问题是getMode只能接收id作为参数，但需要同时拿到对应的objMaterial，这里有几个实用的解决方案：

方案一：给图片添加自定义数据属性 #

给动态创建的img标签添加data-*自定义属性，把objMaterial存进去，然后在getMode里通过id找到对应的图片，再取出这个属性值：

function floorGridToolList(jsonPath, parentID){
    document.getElementById('floorTexture').style.display = 'block';
    $.getJSON(jsonPath, function (jsonObjectList) {
        for (let i = 0; i < jsonObjectList.length; i++) {
            const item = jsonObjectList[i];
            // 创建图片标签
            const img = document.createElement('img');
            img.id = `floor-img-${item.id}`; // 给图片设置唯一ID
            // 用data属性存储objMaterial
            img.dataset.objMaterial = item.objMaterial;
            // 绑定点击事件，传入id
            img.onclick = () => getMode(item.id);
            // 添加到父元素
            document.getElementById(parentID).appendChild(img);
        }
    });
}

// 修改getMode，通过id获取图片并读取data属性
function getMode(id) {
    const targetImg = document.getElementById(`floor-img-${id}`);
    const objMaterial = targetImg.dataset.objMaterial;
    // 现在你可以同时使用id和objMaterial了
    console.log('当前ID:', id, '对应的材质:', objMaterial);
}

方案二：用闭包保存当前项的引用 #

在循环绑定点击事件时，用闭包把当前的item对象保存下来，这样点击时就能直接拿到objMaterial，甚至可以直接改造getMode接收两个参数：

function floorGridToolList(jsonPath, parentID){
    document.getElementById('floorTexture').style.display = 'block';
    $.getJSON(jsonPath, function (jsonObjectList) {
        for (let i = 0; i < jsonObjectList.length; i++) {
            const item = jsonObjectList[i];
            const img = document.createElement('img');
            // 用闭包捕获当前item
            img.onclick = (function(currentItem) {
                return function() {
                    // 如果能修改getMode，直接传两个参数
                    getMode(currentItem.id, currentItem.objMaterial);
                    // 如果不能修改getMode，在这里先处理objMaterial再调用
                    // console.log('材质:', currentItem.objMaterial);
                    // getMode(currentItem.id);
                };
            })(item);
            document.getElementById(parentID).appendChild(img);
        }
    });
}

// 改造后的getMode，接收id和objMaterial
function getMode(id, objMaterial) {
    console.log('ID:', id, '材质:', objMaterial);
}

方案三：事件委托（更高效的方式） #

把点击事件绑定到父元素上，而不是每个图片标签，这样既避免循环绑定的性能问题，还能直接通过事件对象拿到目标图片的data属性：

function floorGridToolList(jsonPath, parentID){
    const parentElement = document.getElementById(parentID);
    document.getElementById('floorTexture').style.display = 'block';
    
    $.getJSON(jsonPath, function (jsonObjectList) {
        for (let i = 0; i < jsonObjectList.length; i++) {
            const item = jsonObjectList[i];
            const img = document.createElement('img');
            // 给图片添加data属性存储id和objMaterial
            img.dataset.id = item.id;
            img.dataset.objMaterial = item.objMaterial;
            parentElement.appendChild(img);
        }
    });

    // 给父元素绑定点击事件，监听图片点击
    parentElement.addEventListener('click', function(e) {
        if (e.target.tagName === 'IMG') {
            const id = e.target.dataset.id;
            const objMaterial = e.target.dataset.objMaterial;
            getMode(id);
            // 或者直接使用这两个值，或者传给改造后的getMode
            // getMode(id, objMaterial);
        }
    });
}

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