[解決済み] JavaScript のネストしたオブジェクトや配列に文字列パスでアクセスする
2022-03-17 19:52:23
質問
私はこのようなデータ構造を持っています。
var someObject = {
'part1' : {
'name': 'Part 1',
'size': '20',
'qty' : '50'
},
'part2' : {
'name': 'Part 2',
'size': '15',
'qty' : '60'
},
'part3' : [
{
'name': 'Part 3A',
'size': '10',
'qty' : '20'
}, {
'name': 'Part 3B',
'size': '5',
'qty' : '20'
}, {
'name': 'Part 3C',
'size': '7.5',
'qty' : '20'
}
]
};
そして、これらの変数を使用してデータにアクセスしたいと思います。
var part1name = "part1.name";
var part2quantity = "part2.qty";
var part3name1 = "part3[0].name";
part1nameには
someObject.part1.name
の値、つまり "パート1" です。part2quantity の値も同様で、60 で埋め尽くされています。
純粋なjavascriptまたはJQueryのどちらかでこれを実現する方法はありますか?
どのように解決するのですか?
すでに持っている類似のコードを元に作ったところ、うまくいったようです。
Object.byString = function(o, s) {
s = s.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties
s = s.replace(/^\./, ''); // strip a leading dot
var a = s.split('.');
for (var i = 0, n = a.length; i < n; ++i) {
var k = a[i];
if (k in o) {
o = o[k];
} else {
return;
}
}
return o;
}
使用方法:。
Object.byString(someObj, 'part3[0].name');
動作するデモを見るには http://jsfiddle.net/alnitak/hEsys/
EDIT
このコードで、左端のインデックスがオブジェクト内の正しくネストされたエントリに対応していない文字列を渡されると、エラーが発生することに気づいた人がいました。 これは正しい懸念ですが、私としては、このような場合は
try / catch
を黙って返すのではなく、呼び出し時にブロックを作成します。
undefined
が無効なインデックスであった場合
関連
-
vue3.0プロジェクトのアーキテクチャを構築するための便利なツール
-
[解決済み] TypeError: $.ajax(...) is not a function?
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] JavaScriptで空文字列/未定義文字列/null文字列をチェックするにはどうすればよいですか?
-
[解決済み] JavaScriptで文字列をbooleanに変換するにはどうしたらいいですか?
-
[解決済み] 2つのJavaScriptオブジェクトのプロパティを動的にマージするにはどうすればよいですか?
-
[解決済み】JavaScriptで文字列の出現箇所をすべて置換する方法
-
[解決済み】オブジェクトの配列を文字列のプロパティ値でソートする
-
[解決済み】オブジェクトからプロパティを削除する(JavaScript)
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
Vueがechartsのtooltipにクリックイベントを追加するケーススタディ
-
vue+webrtc(Tencent cloud)ライブ機能の実践を実現するために
-
vueが定義するプライベートフィルタと基本的な使い方
-
[解決済み】ローカルファイルを開くことができません - Chrome: ローカルリソースの読み込みが許可されていない
-
[解決済み】awaitは非同期関数でのみ有効です。
-
[解決済み】TypeError: Router.use() はミドルウェアの関数を要求しているが、Object を取得した。
-
[解決済み】Node.js Error: Cannot find module express
-
[解決済み】(Google Map API) Geocodeは以下の理由で成功しませんでした。REQUEST_DENIED
-
nodejs unhandledPromiseRejectionWarning メッセージ
-
[解決済み] ドット記法の文字列を使用してオブジェクトの子プロパティにアクセスする [重複].