2

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 ファイル内のいずれかの値になります。背景色の値を 16 進数に変換し、「#」文字を削除して、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」の値が null になることがあるため、すべての色に値があるわけではないので、問題になる可能性があると思いました。ただし、すべての色が持つ「nam」や「num」などのプロパティを宣言するだけでも、同じエラー メッセージが表示されます。

ありがとう。

4

2 に答える 2

0

前の回答は質問のタイプミスと思われるものに関連していたため、これを新しい回答として投稿すると思いました...

あなたが得ているエラーは、実際には次の行に関連しています:

var nameByIndex = colors_list[pageColorIndex].nam

これが、取得しようとする次の行に到達しない理由ですNumberByIndex。;(ちなみに、さらなる問題を防ぐために、これらの行はセミコロンで終了する必要があります...)

問題はオブジェクトにある...

colors_list[pageColorIndex]

...ヌルとして表示されているようです。colors_list(デバッグして確認する価値はあるかもしれませんが) が有効な配列であることを「知っている」ので、問題は;pageColorIndexによって最初に返されるものにあるはずです。null を返しfindIndexByKeyValue()ている可能性があります。findIndexByKeyValue

console.log(obj[i][key])条件ステートメントの上に行を挿入しconsole.log(value)、コードを再度実行したときにコンソールでどのように表示されるかを確認することをお勧めします。特に、16 進数値の前後にある予期しないスペースを探してください。変数が期待どおりにフォーマットされてpageColorいないため、配列オブジェクトの 16 進値のいずれとも一致せず、null が返されることがあります。

お役に立てれば。

于 2013-03-28T15:28:21.717 に答える
-1

更新- jcubic によると、これは JSON には適用されないため、この回答を撤回します。

それがあなたの問題全体であるかどうかはわかりませんが、オブジェクトを正しく宣言していません.キーは通常文字列ではありません.

それ以外の：

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

あなたがしたい：

{ num: "1B2-5", nam: "burntsienna", hex: "EA7E5D", com: "int2"}
于 2013-03-28T15:11:24.010 に答える