नाम के रूप में एक चर का उपयोग करके एक जावास्क्रिप्ट ऑब्जेक्ट में एक संपत्ति जोड़ें?


277

मैं jQuery के साथ DOM से आइटम निकाल रहा हूं और idDOM तत्व का उपयोग करके ऑब्जेक्ट पर प्रॉपर्टी सेट करना चाहता हूं ।

उदाहरण

const obj = {}

jQuery(itemsFromDom).each(function() {
  const element = jQuery(this)
  const name = element.attr('id')
  const value = element.attr('value')

  // Here is the problem
  obj.name = value
})

यदि "myId" के itemsFromDomसाथ एक तत्व शामिल है id, तो मैं obj"myId" नामक एक संपत्ति रखना चाहता हूं । ऊपर मुझे देता है name

मैं जावास्क्रिप्ट का उपयोग करके एक चर का उपयोग करके किसी वस्तु की संपत्ति का नाम कैसे दूं?



जवाबों:



122

ECMAScript 2015 के साथ आप इसे ब्रैकेट नोटेशन का उपयोग करते हुए सीधे ऑब्जेक्ट घोषणा में कर सकते हैं:

var obj = {
  [key]: value
}

keyकिसी भी प्रकार की अभिव्यक्ति कहाँ हो सकती है (जैसे एक चर) मान लौटाना:

var obj = {
  ['hello']: 'World',
  [x + 2]: 42,
  [someObject.getId()]: someVar
}

13
यह प्रश्न मौजूदा वस्तु को संशोधित करने के बारे में है, नया निर्माण नहीं करने के लिए।
माइकल पेरोलकोव्स्की

28
यह विशेष रूप से संशोधित करने के बारे में प्रश्न हो सकता है, लेकिन यह अन्य प्रश्नों से संदर्भित है जो गतिशील रूप से ऑब्जेक्ट बनाने के बारे में हैं और इसलिए मैं यहां समाप्त हो गया और इस उत्तर से खुशी से लाभान्वित हुआ।
ओलिवर लॉयड

2
@wOxxOm lol हाँ, मैं इस परेशानी से क्यों गुज़रूँगा obj[name]=valueजब मैं इसके बजाय आपके सुझाव का उपयोग कर सकता हूँ
chiliNUT

2
मुझे यकीन नहीं है कि ईसीएमएस्क्रिप्ट 6 क्या है, लेकिन मैं इसकी बहुत सराहना करता हूं
आर्थर

2
@ArthurTarasov: ECMAScript 6 को औपचारिक रूप से ECMAScript 2015 ("ES2015") उर्फ ​​ECMAScript 6 वां संस्करण ("ES6") कहा जाता है। यह जावास्क्रिप्ट के लिए जून 2015 में जारी किया गया विनिर्देश है। तब से हमारे पास ईएस2016 है और जल्द ही हमारे पास ईएस2017 होगा, वे अब एक वार्षिक चक्र पर हैं।
टीजे क्राउडर

12

तुम भी इस तरह की वस्तुओं की सूची बना सकते हैं

var feeTypeList = [];
$('#feeTypeTable > tbody > tr').each(function (i, el) {
    var feeType = {};

    var $ID = $(this).find("input[id^=txtFeeType]").attr('id');

    feeType["feeTypeID"] = $('#ddlTerm').val();
    feeType["feeTypeName"] = $('#ddlProgram').val();
    feeType["feeTypeDescription"] = $('#ddlBatch').val();

    feeTypeList.push(feeType);
});

6

ऑब्जेक्ट प्रॉपर्टी तक पहुंचने के लिए दो अलग-अलग नोटेशन हैं

  • डॉट नोटेशन: myObj.prop1
  • ब्रैकेट नोटेशन: myObj ["prop1"]

डॉट नोटेशन तेज़ और आसान है लेकिन आपको वास्तविक संपत्ति के नाम का स्पष्ट रूप से उपयोग करना चाहिए । कोई प्रतिस्थापन, चर, आदि।

ब्रैकेट नोटेशन ओपन एंडेड है। यह एक स्ट्रिंग का उपयोग करता है लेकिन आप किसी भी कानूनी js कोड का उपयोग करके स्ट्रिंग का उत्पादन कर सकते हैं। आप स्ट्रिंग को शाब्दिक के रूप में निर्दिष्ट कर सकते हैं (हालांकि इस मामले में डॉट नोटेशन आसान पढ़ा जाएगा) या किसी तरह से एक चर या गणना का उपयोग करें।

तो, इन सभी सेट myObj संपत्ति नामित prop1 मूल्य को नमस्कार :

// quick easy-on-the-eye dot notation
myObj.prop1 = "Hello";

// brackets+literal
myObj["prop1"] = "Hello";

// using a variable
var x = "prop1"; 
myObj[x] = "Hello";                     

// calculate the accessor string in some weird way
var numList = [0,1,2];
myObj[ "prop" + numList[1] ] = "Hello";     

नुकसान:

myObj.[xxxx] = "Hello";      // wrong: mixed notations, syntax fail
myObj[prop1] = "Hello";      // wrong: this expects a variable called prop1

tl; dnr : यदि आप कुंजी की गणना या संदर्भ करना चाहते हैं तो आपको ब्रैकेट नोटेशन का उपयोग करना चाहिए । यदि आप कुंजी को स्पष्ट रूप से उपयोग कर रहे हैं, तो सरल स्पष्ट कोड के लिए डॉट नोटेशन का उपयोग करें ।

नोट: कुछ अन्य अच्छे और सही उत्तर हैं, लेकिन मैंने व्यक्तिगत रूप से उन्हें जेएस ऑन-द-फ्लाई क्विकनेस के साथ कम परिचितता से थोड़ा संक्षिप्त रूप में पाया। यह कुछ लोगों के लिए उपयोगी हो सकता है।


3

Lodash के साथ, आप इस तरह नई वस्तु बना सकते हैं _.set :

obj = _.set({}, key, val);

या आप इस तरह मौजूदा वस्तु पर सेट कर सकते हैं:

var existingObj = { a: 1 };
_.set(existingObj, 'a', 5); // existingObj will be: { a: 5 }

यदि आप अपने रास्ते में डॉट ("।") का उपयोग करना चाहते हैं, तो आपको ध्यान रखना चाहिए, क्योंकि लॉशार्इ पदानुक्रम सेट कर सकता है, उदाहरण के लिए:

_.set({}, "a.b.c", "d"); // { "a": { "b": { "c": "d" } } }

2

पहले हमें कुंजी को चर के रूप में परिभाषित करने की आवश्यकता है और फिर हमें उदाहरण के लिए ऑब्जेक्ट के रूप में कुंजी को असाइन करने की आवश्यकता है

var data = {key:'dynamic_key',value:'dynamic_value'}
var key = data.key;
var obj = { [key]: data.value}
console.log(obj)



0

यदि आप गतिशील रूप से किसी ऑब्जेक्ट में फ़ील्ड जोड़ना चाहते हैं, तो इसे करने का सबसे सरल तरीका इस प्रकार है:

 var params= [
{key: "k1", value=1},
{key: "k2", value=2},
{key: "k3", value=3}];

for(i=0; i< params.len; i++) {
  data[params[i].key] = params[i].value
}

यह डेटा ऑब्जेक्ट बनाएगा जिसमें निम्नलिखित फ़ील्ड हैं:

{k1:1, k2:2, k3:3}

0

यदि आपके पास ऑब्जेक्ट है, तो आप मैप के माध्यम से कुंजी की सरणी बना सकते हैं, और पिछली ऑब्जेक्ट कुंजी और मान से नई ऑब्जेक्ट बना सकते हैं।

Object.keys(myObject)
.map(el =>{
 const obj = {};
 obj[el]=myObject[el].code;
 console.log(obj);
});

0

javascript ऑब्जेक्ट गुण लाने के लिए ajavascript में दो प्रकार के एनोटेशन हैं:

ओब्ज = {};

1) (।) एनोटेशन उदा। Obj.id यह तभी काम करेगा जब ऑब्जेक्ट में पहले से ही 'id' नाम की संपत्ति है

2) ([]) एनोटेशन उदा। ओब्ज [आईडी] यहां अगर ऑब्जेक्ट में, आईडी ’नाम की कोई संपत्ति नहीं है, तो यह। आईडी’ नाम के साथ एक नई संपत्ति बनाएगा।

उदाहरण के लिए नीचे:

जब आप ओब्ज [नाम] लिखेंगे तो एक नई प्रॉपर्टी हमेशा बनाई जाएगी। और अगर संपत्ति पहले से ही एक ही नाम के साथ मौजूद है तो यह इसे ओवरराइड करेगा।

const obj = {}
    jQuery(itemsFromDom).each(function() {
      const element = jQuery(this)
      const name = element.attr('id')
      const value = element.attr('value')
      // This will work
      obj[name]= value;
    })

0

विषय से संबंधित, विशेष रूप से jquery के लिए नहीं। मैं इस ec6 प्रतिक्रिया परियोजनाओं में इस्तेमाल किया, शायद किसी की मदद करता है:

this.setState({ [`${name}`]: value}, () => {
      console.log("State updated: ", JSON.stringify(this.state[name]));
    });

पुनश्च: कृपया उद्धरण चरित्र का ध्यान रखें।



-2
const data = [{
    name: 'BMW',
    value: '25641'
  }, {
    name: 'Apple',
    value: '45876'
  },
  {
    name: 'Benz',
    value: '65784'
  },
  {
    name: 'Toyota',
    value: '254'
  }
]

const obj = {
  carsList: [{
    name: 'Ford',
    value: '47563'
  }, {
    name: 'Toyota',
    value: '254'
  }],
  pastriesList: [],
  fruitsList: [{
    name: 'Apple',
    value: '45876'
  }, {
    name: 'Pineapple',
    value: '84523'
  }]
}

let keys = Object.keys(obj);

result = {};

for(key of keys){
    let a =  [...data,...obj[key]];
    result[key] = a;

}
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.