javascript 取得したデータの〇〇桁目を変数に格納し画面に表示

Question

###前提・実現したいこと
milkcocoaに格納したデータ {"NGHYL":2017031750,"ZT":1527503362,"P":1}を読み込み、
変数NGHYLの10桁目（上記の例では０）を別の変数に格納し、関数を呼ぶ際の引数に用いながら、その格納した変数をページ上に表示したいです。

以下に、javascriptのソースコードを示します。
※コメント化しているのは、いろいろ試した結果ですがうまくいきませんでした。
お手数おかけいたしますが、どうかよろしくお願いいたします。

###該当のソースコード

// Milkcocoa App ID
var MILKCOCOA_APP_ID = "re*********";

// Milkcocoa Data Store
var MILKCOCOA_DATASTORE = "Ma*********";

// Milkcocoa
var milkcocoa = new MilkCocoa(MILKCOCOA_APP_ID + ".mlkcca.com");

// Milkcocoa Data Store
var dataStore = milkcocoa.dataStore(MILKCOCOA_DATASTORE);

// 運転中画面
var working = document.getElementById("working");

// 黄色停止画面(unfounded)
var yellowstopunfounded = document.getElementById("yellowstopunfounded");

// 黄色停止画面(founded)
var yellowstopfounded = document.getElementById("yellowstopfounded");

// 赤色停止画面(founded)
var redstopfounded = document.getElementById("redstopfounded");

// 赤色停止画面(unfounded)
var redstopunfounded = document.getElementById("redstopunfounded");

// 無点灯画面(others)
var others = document.getElementById("others");

// 過去1件のデータ取得
dataStore.stream().size(1).next(function (err, data) {
  // 取得が成功したら
  if (!err) {
    var obj = data[0];
	
    // 明るさの状態を取得
    var NGHYL = obj.value.NGHYL;
	//var ZT = obj.value.ZT;
	
    var zennou = HGHYL.charAt(9);
	//var zennou = obj.value.P;
	
	//Light Stateの抜き出し
	//var flg = new Array();
	
	//var cnt = data.length;
	
	//for( var i = 0 ; i < cnt ; i++){
	//   flg[i] = data.charAt(i);
	//}
	
	//var zennou = flg[0];
	
	
    // 画面の切り替え
    changeView(zennou);
  }
});

// ArduinoからMilkcocoaに値がpushされたら
dataStore.on("push", function (data) {
    if(receivedData) receivedData.textContent = JSON.stringify(data); // この行追加
    // 明るさの状態を取得
    var NGHYL = data.value.NGHYL;
	var ZT = data.value.ZT;
	var P = data.value.P;
	
    var zennou = HGHYL.charAt(9);
	
	
    // 画面の切り替え
    changeView(zennou);
});

/**
 * 画面を切り替えます。
 */
function changeView(zennou) {
  // 運転中
  if (zennou == 5) {
    Working();
  }
  // 黄色停止中(unfounded)
  if (zennou == 4) {
    Yellowstopunfounded();
  }  
  // 黄色停止中(founded)
  if (zennou == 3) {
    Yellowstopfounded();
  }
  // 赤色停止中(unfounded)
  if (zennou == 2) {
    Redstopunfounded();
  }
  // 赤色停止中(founded)
  if (zennou == 1) {
    Redstopfounded();
  }
  // 無点灯中(others)
  if (zennou == 0) {
    Others();
  }
}
/**
 * 運転中画面に切り替えます。
 */
function Working() {
  working.style.display = "block";
  yellowstopfounded.style.display = "none";
  yellowstopunfounded.style.display = "none";
  redstopunfounded.style.display = "none";
  redstopfounded.style.display = "none";
  others.style.display = "none";
}
/**
 * 黄色停止中画面(unfounded)に切り替えます。
 */
function Yellowstopunfounded() {
  working.style.display = "none";
  yellowstopfounded.style.display = "none";
  yellowstopunfounded.style.display = "block";
  redstopunfounded.style.display = "none";
  redstopfounded.style.display = "none";
  others.style.display = "none";
}
/**
 * 黄色停止中画面(founded)に切り替えます。
 */
function Yellowstopfounded() {
  working.style.display = "none";
  yellowstopfounded.style.display = "block";
  yellowstopunfounded.style.display = "none";
  redstopunfounded.style.display = "none";
  redstopfounded.style.display = "none";
  others.style.display = "none";
}
/**
 * 赤色停止中画面(founded)に切り替えます。
 */
function Redstopfounded() {
  working.style.display = "none";
  yellowstopfounded.style.display = "none";
  yellowstopunfounded.style.display = "none";
  redstopunfounded.style.display = "none";
  redstopfounded.style.display = "block";
  others.style.display = "none";
}
/**
 * 赤色停止中画面(unfounded)に切り替えます。
 */
function Redstopunfounded() {
  working.style.display = "none";
  yellowstopfounded.style.display = "none";
  yellowstopunfounded.style.display = "none";
  redstopunfounded.style.display = "block";
  redstopfounded.style.display = "none";
  others.style.display = "none";
}
/**
 * 無点灯中画面(others)に切り替えます。
 */
function Others() {
  working.style.display = "none";
  yellowstopfounded.style.display = "none";
  yellowstopunfounded.style.display = "none";
  redstopunfounded.style.display = "none";
  redstopfounded.style.display = "none";
  others.style.display = "block";
}

Answer 1

var NGHYL = data.value.NGHYL;

ここで 変数NGHYL が代入した値によって数値型になっているので、
文字列で使う charAt() がエラーになっていないでしょうか？

var NGHYL = data.value.NGHYL + "";

でいかがでしょう？

Comments

[bobby2128]

magicp様
アドバイスいただき誠にありがとうございました。
ご提案いただきました手法にて無事に解決いたしました。

ありがとうございました。

Answer 2

//    var zennou = HGHYL.charAt(9); // 2箇所とも同じことになっている
//                 ↓
      var zennou = NGHYL.charAt(9);

ここでは？

Comments

[bobby2128]

kei344様
こんにちはコメントいただきありがとうございました。
初歩的なミスをしており申し訳ございません。
現在以下のように修正しておりが、それでもうまく表示してくれません。画面の上に取得したデータを以下のように表示してくれるので、データは来ているのですが、変数NGHYLに値が来ているのか、そこから１文字を変数zennouに格納できているのか、不透明な状態です。
お手数おかけいたしますが、どうかご確認をよろしくお願いいたします。

取得データ
{"id":"j0k9oa85tuKYv6y","path":"MachineCondition","value":{"NGHYL":2017031860,"ZT":711322987,"P":0},"timestamp":1490144690885}

// 過去1件のデータ取得
dataStore.stream().size(1).next(function (err, data) {
// 取得が成功したら
if (!err) {
var obj = data[0];

// 明るさの状態を取得
var NGHYL = obj.value.NGHYL;

var zennou = NGHYL.charAt(9);

// 画面の切り替え
changeView(zennou);
}
});

// ArduinoからMilkcocoaに値がpushされたら
dataStore.on("push", function (data) {
if(receivedData) receivedData.textContent = JSON.stringify(data); // この行追加
// 明るさの状態を取得
var NGHYL = data.value.NGHYL;

var zennou = NGHYL.charAt(9);

// 画面の切り替え
changeView(zennou);
});

[kei344]

> ご確認をよろしくお願いいたします。
どうやって？

console.log( data ); console.log( zennou ); を changeView の前にでも入れて中身を確認してみてはいかがでしょうか。

【Chromeのデベロッパーツールを使ったJavascriptのデバッグ | kazsoga blog】
http://kazsoga.com/javascript-debug/

[bobby2128]

kei344様
こんにちはコメントいただき誠にありがとうございました。

また、ご親切にデバックの手法もご提案いただきありがとうございます。