オブジェクト型の結果は返ってくるが、それをlengthで要素数を数えると未定義になる。

Question

console.log(words)は複数の検索語の結果が返ってくるが、
var len = words.length;
console.log(len);をすると未定義になる。

なぜでしょうか。

          }).done(function (words) {
            $(".ajaxregisteredresult").empty();
            console.log(words);
            var len = words.length;
            console.log(len);
            for(var i=0; i < len; i++){
            $(".ajaxregisteredresult").append('<option value="' + words[i]["registered"] +'">');
          }

lenの方は、undefinedがあらわれます。
どうしてでしょうか。

$(function() {
    $('.search_box').on("keyup",function(){//keyup時

      var words = new Object();
        $.ajax({
            url: "/words/registered.json",
            type: "post",
            dataType: "json",
            data : {
             words : $(".search_box").val()
            }
          }).done(function (words) {
            $(".ajaxregisteredresult").empty();
            console.log(words);
            words_arr = words.toArray();
            var len = words_arr.length;
            console.log(len);
            for(var i=0; i < len; i++){
            $(".ajaxregisteredresult").append('<option value="' + words[i]["registered"] +'">');
          }
        }).fail(function (data) {
            console.log("エラーだよ");
        });
    });
});

Comments

[kunai]

wordsがなんなのか見せていただけませんか。
コールバックのようですので、そのコールバックが呼ばれるところも含めていただけると助かりますが

Answer 1

Array.isArray

「配列ではないから」ではないでしょうか。

console.log(Array.isArray(words));

length プロパティ

length を扱える Object 型は配列の他にもいくつかありますが、length が規定されたものでしか扱えず、Object 型全般で扱えるプロパティではありません。

• 配列
• NodeListのインスタンス
• HTMLCollectionのインスタンス

words が直属で持つプロパティの数を数える事が目的なら下記コードで参照可能です。

Object.keys(words).length

Re: Re: yajin さん

Comments

[yajin]

console.log(Array.isArray(words));
falseが返ってきます。

lengthって配列型ではないと使えないのでしょうか。

[think49]

親記事に追記しました。

[yajin]

ありがとうございます。
console.log(words);
var len = Object.keys(words).length;
console.log(len);
とやると、6個データがあるものの、console.log(len)は1と出ます。

[think49]

SSみましたが、 words = {words:[{},{},{},{},{},{}]} のように読めます。
words は一つしかプロパティを持っていないのではないでしょうか。
(答えはわかりますが、自分で考えてほしいのであえて書きません)

[yajin]

$(".ajaxregisteredresult").empty();
console.log(words);

var len = 0;
for (var i in words["id"]){
len++;
}
console.log(len);
for(var i=0; i < len; i++){
$(".ajaxregisteredresult").append('<option value="' + words[i]["registered"] +'">');
}
近づいたでしょうか。

[kei344]

To: yajinさん
横から失礼します。

【【JavaScript】プロパティへのアクセス - Qiita】
http://qiita.com/tomcky/items/0757348473873765432e

[think49]

To: yajinさん
残念ながら、遠のいたと思います。
words["id"] === undefined なので len === 0 になります。
console.log(words['id']);
console.log(len);
でコンソールデバッグしてみてください。
毎回、ajaxをすると時間がかかるので、
console.log(JSON.stringify(words)); して出力されたオブジェクト初期化子を元に目的の値を参照するまでトライアンドエラーを繰り返してみるといいと思います。
多次元配列や多次元オブジェクト的な考え方が必要になります。
https://www.google.co.jp/search?num=30&q=%E5%A4%9A%E6%AC%A1%E5%85%83%E9%85%8D%E5%88%97+javascript
https://www.google.co.jp/search?q=javascript+%E5%A4%9A%E6%AC%A1%E5%85%83%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88

To: kei344 さん
補足ありがとうございます。

[yajin]

wordsオブジェクトの中にwordsという配列名があり、その中の要素を数えるという考え方でいいんですよね？

[yajin]

var len = 0;
for (var i in words["words.registered"]){
len++;
}
console.log(len);

[yajin]

var len = 0;
// for (var i in words.words){//208
//for (var i in words.words["registerd"]){//0
//for (var i in words["words"]["registered"]){//0
for (var i in words.words["id"]){
len++;
}
console.log(len);

方向性はこのような形でいいのでしょうか。

[think49]

To: yajinさん
> wordsオブジェクトの中にwordsという配列名があり、その中の要素を数えるという考え方でいいんですよね？
そうです。

for-in 文は使いません。
配列を回すのは for 文か Array.prototype.forEach です。
配列を変数に格納することを意識してみてください。

[yajin]

多次元配列であることはわかっているのですが、できません。

例題みたいなものを頂けますか？

[yajin]

要素すらアクセスできません・・・・。

この後も色々と仕事があるので、例題を頂ければ幸いに存じます。

[kei344]

var a = { b : 'text' };
console.log( a.b ); // 'text'
var c = { d : [] };
console.log( c.d ); // []

[yajin]

すみません。それはわかります。

[think49]

kei344さんの例題が分かるならそのまま答えに繋がると思うのですが…。
特に c.d は今回のコードと同じですよね？
for 文で配列を列挙する部分が分からないのでしょうか。
for (var i = 0, l = d.length; i < l; ++i) { console.log(d[i]); }

[think49]

var d = [{id: 1, value: 'hoge'}, {id: 2, value: 'foo'}, {id: 3, value: 'piyo'}];
for (var i = 0, l = d.length; i < l; ++i) {
console.log(d[i]);
console.log(d[i].id);
console.log(d[i].value);
}

[yajin]

var words_arr = words.words;
console.log(words_arr[0]);
とすると、
[
という結果しか返ってきません。

[think49]

状況を知りたいので console.log(JSON.stringify(words)); の結果を質問文にコードブロックで括って追記して下さい。

> [
> という結果しか返ってきません。
"[" の後は何でしょうか。

[yajin]

```コードブロック？
{"words":"[{\"id\":216,\"registered\":\"Absalom\"},{\"id\":217,\"registered\":\"abscess\"},{\"id\":218,\"registered\":\"Abschied\"},{\"id\":219,\"registered\":\"absconded\"},{\"id\":220,\"registered\":\"absence\"},{\"id\":221,\"registered\":\"Absence\"}]"}
```

[yajin]

var words_arr = words.words;
console.log(words_arr[1]);
は、
{
が出てきています。文字列が1文字ずつ分割されてでてきます。
よって、words.words.lengthに関しては、その文字数全体が取得されている状況です。

[think49]

なるほど。合点がいきました。
words.words は「JSON文字列」なんですね。
var words_arr = JSON.parse(words.words);
console.log(words_arr[0]);

> ```コードブロック？
それで合っていますが、コメントではmarkdown記法が利かないので質問文に編集して追記してくれることを期待していました。

[think49]

おそらく、上のコメントで解決可能ですが、問題が一つ。
元々、jQueryで JSON を Object 型にパースしているはずですが、パースした結果のオブジェクトにも更に JSON が入っています。
JSON.stringify を2回実行していることになり、これは無駄なフォーマットになってしまっていると思います。
JSONを生成するコードに問題がありそうですので見直すことをお勧めします。

[yajin]

var words_arr = JSON.parse(words.words);
// console.log(words_arr[0]["registered"]);

i = 0;
$.each(words_arr, function(){
$(".ajaxregisteredresult").append('<option value="' + words_arr[i]["registered"] +'"></option>');
i++;
}
)

でまずは動きました。

[yajin]

色々と細かいところチェックしてました。
ブラウザでは使えたのですが、iPhoneでは<datalist>タグは使えないのでしょうか。
iPhoneでは動いてません。GoogleChromeでもoperaでももちろん動きます。

[yajin]

http://caniuse.com/#feat=datalist
あー使えないんですね・・・。

ほんと助かりました！
誠にありがとうございます！！！
後日細かい点を修正していきます。キーワードがわかったのでちょっとまた勉強してみます。