मैं एक जावास्क्रिप्ट ऑब्जेक्ट को कैसे एक्सेस कर सकता हूं जिसमें ऑब्जेक्ट की कुंजी में रिक्त स्थान है?

112

मेरे पास एक जावास्क्रिप्ट ऑब्जेक्ट है जो कुछ इस तरह दिखता है:

var myTextOptions = {
  'cartoon': {
     comic: 'Calvin & Hobbes',
     published: '1993'
  },
  'character names': {
    kid: 'Calvin',
    tiger: 'Hobbes'
  }
}

मैं cartoonआसानी से myTextOptions.cartoon.comicया जो भी उपयोग कर सकता हूं उसके गुणों तक पहुंच सकता हूं । हालाँकि, मैं एक्सेस करने के लिए वाक्यविन्यास अधिकार प्राप्त करने में सक्षम नहीं हूं kid। मैंने बिना किसी भाग्य के साथ कोशिश की है:

myTextOptions.character names.kid
myTextOptions."character names".kid
myTextOptions.character\ names.kid
myTextOptions.'character names'.kid
myTextOptions.["character names"].kid
myTextOptions.character%20names.kid

javascript object

— जूलियो
स्रोत

Google Chrome में, यदि आप तत्व का निरीक्षण करने जाते हैं और फिर json फ़ाइल डेटा सेट पर होवर करते हैं, तो प्रत्येक अलग-अलग डेटा सेट में एक टूलटिप दिखाई देगा, जो इसे पथ दिखाता है और यह आपको अपने क्लिपबोर्ड में पथ को कॉपी करने का विकल्प भी देता है। सिर्फ एक FYI करें।

— सिमोन सुह

बहुत बढ़िया जवाब। लेकिन अंतिम विकल्प मेरे लिए काम नहीं किया है।

— डैनियल बंदेइरा

अधिक ... जब मैं myTextOptions.character% 20n.kid टाइप करता हूं तो 'NaN' देता है। अंतिम संपत्ति का नाम (बच्चा) कोई फर्क नहीं पड़ता, कोई अन्य होना चाहिए। मैं डेबियन 9 पर फ़ायरफ़ॉक्स क्वांटम 8.3.0esr (64-बिट) का उपयोग कर रहा हूं

— डैनियल

231

ECMAscripts का उपयोग करें "ब्रैकेट नोटेशन":

myTextOptions[ 'character names' ].kid;

आप उस संकेतन का उपयोग किसी भी तरह से, पढ़ने और लिखने में कर सकते हैं।

अधिक जानकारी के लिए यहां पढ़ें:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects

— JANDY
स्रोत

2

जूलियो ने ओपी में उल्लेख किया है कि उसने पहले ही प्रयोग करने की कोशिश की थी myTextOptions.["character names"].kid- इस प्रश्न के लिए पूर्णता के लिए, मैं सोच रहा था कि यह काम क्यों नहीं किया?

— James_F

7

@James_F क्योंकि वह भी एक dot notationसाथ इस्तेमाल किया । केवल एक एक्सेसर डायरेक्टिव होना चाहिए।

— jAndy

2

ओह, हाँ, क्षमा करें - इतनी मेहनत लग रही थी कि मैंने ब्रैकेट से पहले अतिरिक्त डॉट नहीं देखा! - धन्यवाद

— James_F

किसी को पता है कि क्या यह एक अच्छा है या बुरा अभ्यास ऑब्जेक्ट कुंजियों में रिक्त स्थान का उपयोग करता है?

— जुआन पी। ओर्टिज़

1

@ JuanP.Ortiz, यह एक अच्छा अभ्यास नहीं है यदि आप टाइपस्क्रिप्ट का उपयोग कर रहे हैं, तो आप टाइपस्क्रिप्ट संकलन जांच खो देंगे।

— रोजी कासिम

4

जावास्क्रिप्ट ऑब्जेक्ट के गुणों को ब्रैकेट नोटेशन का उपयोग करके भी एक्सेस या सेट किया जा सकता है (अधिक जानकारी के लिए संपत्ति एक्सेसर्स देखें )। ऑब्जेक्ट्स को कभी-कभी साहचर्य सरणियों कहा जाता है क्योंकि प्रत्येक संपत्ति एक स्ट्रिंग मान से जुड़ी होती है जिसे इसे एक्सेस करने के लिए उपयोग किया जा सकता है। इसलिए, उदाहरण के लिए, आप myCar ऑब्जेक्ट के गुणों को निम्नानुसार एक्सेस कर सकते हैं:

myCar['make'] = 'Ford';
myCar['model'] = 'Mustang';
myCar['year'] = 1969;

अधिक के लिए, JS ऑब्जेक्ट्स के साथ कार्य करना पढ़ें ।

तो आपके मामले में यह है myTextOptions['character names'].kid;

— अहमद आवा
स्रोत

2

हम इसके द्वारा भी कर सकते हैं -

myTextOptions[ 'character names' ]['kid'];

यह उपयोगी है जब हमारे पास लगातार चाबियाँ होती हैं जो अंतरिक्ष से मिलकर होती हैं।

— शुभम एके
स्रोत

0

मुझे अपना समाधान यहां साझा करने दें मैं टाइप स्क्रिप्ट के साथ VueJs का उपयोग कर रहा हूं।

UI में पार्स और डिस्प्ले करने के लिए मुझे json के बाद मिला

 {
    "Brand": "MAMA",
    "Variety": "Instant Noodles Coconut Milk Flavour",
    "Style": "Pack",
    "Country": "Myanmar",
    "Stars": 5,
    "Top Ten": "2016 #10"
  },

मैंने टाइपस्क्रिप्ट में निम्नलिखित मॉडल हस्तक्षेप बनाया है

export interface Resto {
    Brand: string;
    Variety: string;
    Style: string;
    Country: string;
    Stars: any;
    Top_Ten: string;
    }

मैंने एपीआई को इस प्रकार कहा है:

   public async getListOfRestos() {
    return (await fetch(
      `http://starlord.hackerearth.com/TopRamen`,
      {
        method: "get",
        credentials: "include",
        headers: {
          "Content-Type": "application/json",
        },
        body: undefined
      }
    )) as IFetchResponse<Resto[]>;
  }

JSX में इस्तेमाल किया जैसे:

 <div class="parent" v-for="(x,i) in listOfRestos" :key="i">
      <div>{{x.Brand}}</div>
      <div>{{x.Variety}}</div>
      <div>{{x.Style}}</div>
      <div>{{x.Country}}</div>
      <div>{{x.Stars}}</div>
      <div>{{x['Top Ten']}}</div>
  </div>

वही रिएक्ट और एंगुलर में भी काम कर सकता है।

— विकास गुप्ता
स्रोत

0

इस कोड का उपयोग करें

myTextOptions.["character names"]["kid"];

— therealsungumo
स्रोत

इस बिंदु और आत्महत्या के लिए, लेकिन नए js उपयोगकर्ता सवाल के पीछे तर्क को समझ नहीं सकते हैं।

— ग्रासहॉपर