Question

作为一名Javascript新手，我很难搞清楚以下问题：

我有一个带有颜色列表的外部JSON文件。

[
{"num": "1B2-5","nam": "burntsienna","hex": "EA7E5D","com": "int2"},
{"num": "1B3-5","nam": "cadetblue","hex": "5F9EA0","col": "int1"},
{"num": "1B1-6","nam": "chartreuse","hex": "7FFF00"},
{"num": "1B2-6","nam": "chocolate","hex": "D2691E","com": "int2"}
]

在代码的这一点上，＃background的background-color值将等于JSON文件中的一个值。我将background-color值转换为hex，删除'＃'字符，并在JSON数组中找到它的索引号。然后，我使用索引号为相应的属性声明变量。

为了这个例子，我缩短了代码。

$(document).ready(function() {
$.getJSON('_js/json.js', function(colors_list){ 

    var pageColorPre = rgb2hex($('#background').css('background-color'));
    var pageColor = pageColorPre.toUpperCase().substr(1);
    var pageColorIndex = findIndexByKeyValue(colors_list, "hex", pageColor)

    var nameByIndex = colors_list[pageColorIndex].nam
    var numberByIndex = colors_list[pageColorIndex].num
    var comByIndex = colors_list[pageColorIndex].com


function findIndexByKeyValue(obj, key, value){
    for (var i = 0; i < obj.length; i++) {
        if (obj[i][key] == value) {
        return i;
        }
      }
      return null;
}

function rgb2hex(rgb) {
 if (  rgb.search("rgb") == -1 ) {
      return rgb;
      } else {
      rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/);
      function hex(x) {
           return ("0" + parseInt(x).toString(16)).slice(-2);
      }
      return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); 
      }
}
});
});

即使代码在Safari，Firefox和Chrome中运行良好，但当浏览器到达此行时：

  var numberByIndex = colors_list[pageColorIndex].num

调试时出现以下错误：

uncaught TypeError: cannot read property 'nam' of undefined.

IE8中的代码中断了以下消息：

'colors_list[...] nam'is null or not an object.

我想也许因为“com”和“col”值有时为零，并非每种颜色都有它们，这可能是一个问题。但是，即使只声明每种颜色都有的“nam”或“num”等属性，我也会得到相同的错误信息。

感谢。

Answer 1

以为我会将此作为新答案发布，因为之前的答案是关于问题中似乎是错字的内容......

您获得的错误实际上与该行有关：

var nameByIndex = colors_list[pageColorIndex].nam

这就是为什么它没有到达你试图获得NumberByIndex的下一行。（顺便说一下，你应该用分号;结束这些行，以防止进一步的问题......）

问题在于对象......

colors_list[pageColorIndex]

...因为它似乎显示为null。由于我们“知道”colors_list（虽然可能值得调试以检查）是一个有效的数组，但问题必须是pageColorIndex最初由findIndexByKeyValue()返回的问题;可能是findIndexByKeyValue返回null。

值得在条件语句上方插入行console.log(obj[i][key])和console.log(value)，并在再次运行代码时检查它们在控制台中的外观。特别注意在十六进制值之前或之后的意外间距。您可能会发现pageColor变量的格式不符合您的预期，因此不会与数组对象中的任何十六进制值匹配并返回null。

希望这有帮助。

Answer 2

更新 - 根据jcubic，这不适用于JSON，所以我撤回了这个答案。

不确定这是否是你的整个问题，但你并没有正确地声明对象 - 键通常不是字符串。

而不是：

{"num": "1B2-5","nam": "burntsienna","hex": "EA7E5D","com": "int2"}

你想：

{ num: "1B2-5", nam: "burntsienna", hex: "EA7E5D", com: "int2"}

jQuery JSON数组未定义/不是对象

2 个答案: