JQuery के साथ जावास्क्रिप्ट ऑब्जेक्ट से आइटम जोड़ना / हटाना


82

मेरे पास एक जावास्क्रिप्ट वस्तु इस प्रकार है:

var data = {items: [
    {id: "1", name: "Snatch", type: "crime"},
    {id: "2", name: "Witches of Eastwick", type: "comedy"},
    {id: "3", name: "X-Men", type: "action"},
    {id: "4", name: "Ordinary People", type: "drama"},
    {id: "5", name: "Billy Elliot", type: "drama"},
    {id: "6", name: "Toy Story", type: "children"}
]};

अगर मैं इस सूची में आइटम जोड़ना / हटाना चाहता हूं, तो मैं jQuery का उपयोग करके इसके बारे में कैसे जाऊंगा? क्लाइंट चाहता है कि यह सूची गतिशील रूप से परिवर्तनीय हो।


2
यह JSON नहीं है। यह एक वस्तु शाब्दिक है: benalman.com/news/2010/03/theres-no-such-thing-as-a-json ( और JSON वस्तुओं के खिलाफ धर्मयुद्ध चला जाता है .... )
फेलिक्स क्लिंग

4
@ मैट: वास्तव में। खैर, JSON एक पाठ्य डेटा प्रारूप है। और उद्धृत कोड JSON नहीं होगा भले ही वह एक स्ट्रिंग में हो (जैसा कि JSON को संपत्ति के नामों पर दोहरे उद्धरण चिह्नों की आवश्यकता है)।
टीजे क्राउडर

6
मेरा ज्ञानवर्धन करने के लिए धन्यवाद। हालांकि यह यकीन है कि एक JSON वस्तु की तरह लग रहा है! एक बार फिर धन्यवाद!
बग मैग्नेट

3
@Bug: के लिए JSON अंकन {items: []}इस प्रकार दिखाई देगा: {"items": []}। यह बिल्कुल समान बात नहीं है (बस बहुत समान; फिर से, JSON जो आप उपयोग कर रहे हैं, जो वस्तु शाब्दिक अंकन है) का एक सबसेट है। जब आप deserialize JSON, परिणाम एक वस्तु ग्राफ (जैसे, जावास्क्रिप्ट में, यह एक जावास्क्रिप्ट वस्तु है) है।
टीजे क्राउडर

जवाबों:


220

सबसे पहले, आपका उद्धृत कोड JSON नहीं है । आपका कोड जावास्क्रिप्ट ऑब्जेक्ट शाब्दिक अंकन है। JSON उस का एक सबसेट है जिसे आसान पार्सिंग के लिए डिज़ाइन किया गया है।

आपका कोड एक वस्तु (परिभाषित करता है data) एक सरणी (युक्त itemsवस्तुओं की) (एक साथ प्रत्येक id, nameऔर type)।

आपको इसके लिए jQuery की जरूरत नहीं है या सिर्फ जावास्क्रिप्ट चाहिए।

एक आइटम जोड़ना:

data.items.push(
    {id: "7", name: "Douglas Adams", type: "comedy"}
);

वह अंत तक जोड़ता है। बीच में जोड़ने के लिए नीचे देखें।

कोई आइटम निकालना:

इसके कई तरीके हैं। spliceविधि सबसे बहुमुखी है:

data.items.splice(1, 3); // Removes three items starting with the 2nd,
                         // ("Witches of Eastwick", "X-Men", "Ordinary People")

splice मूल सरणी को संशोधित करता है, और आपके द्वारा हटाए गए आइटमों की एक सरणी देता है।

बीच में जोड़ना:

spliceवास्तव में जोड़ना और हटाना दोनों है। spliceविधि का हस्ताक्षर है:

removed_items = arrayObject.splice(index, num_to_remove[, add1[, add2[, ...]]]);
  • index - सूचकांक जिस पर परिवर्तन करना शुरू करना है
  • num_to_remove - उस इंडेक्स से शुरू करके, इस कई प्रविष्टियों को हटा दें
  • addN - ... और फिर इन तत्वों को सम्मिलित करें

तो मैं इस तरह से 3 स्थिति में एक आइटम जोड़ सकते हैं:

data.items.splice(2, 0,
    {id: "7", name: "Douglas Adams", type: "comedy"}
);

वह क्या कहता है: सूचकांक 2 पर शुरू, शून्य आइटम निकालें, और फिर इस निम्नलिखित आइटम को डालें। परिणाम इस तरह दिखता है:

var data = {items: [
    {id: "1", name: "Snatch", type: "crime"},
    {id: "2", name: "Witches of Eastwick", type: "comedy"},
    {id: "7", name: "Douglas Adams", type: "comedy"},     // <== The new item
    {id: "3", name: "X-Men", type: "action"},
    {id: "4", name: "Ordinary People", type: "drama"},
    {id: "5", name: "Billy Elliot", type: "drama"},
    {id: "6", name: "Toy Story", type: "children"}
]};

आप कुछ को हटा सकते हैं और कुछ को एक बार में जोड़ सकते हैं:

data.items.splice(1, 3,
    {id: "7", name: "Douglas Adams", type: "comedy"},
    {id: "8", name: "Dick Francis", type: "mystery"}
);

... जिसका अर्थ है: इंडेक्स 1 से शुरू होकर, तीन प्रविष्टियों को हटा दें, फिर इन दो प्रविष्टियों को जोड़ें। जिसके परिणामस्वरूप:

var data = {items: [
    {id: "1", name: "Snatch", type: "crime"},
    {id: "7", name: "Douglas Adams", type: "comedy"},
    {id: "8", name: "Dick Francis", type: "mystery"},
    {id: "4", name: "Ordinary People", type: "drama"},
    {id: "5", name: "Billy Elliot", type: "drama"},
    {id: "6", name: "Toy Story", type: "children"}
]};

नमस्ते, अगर मैं ऑब्जेक्ट डेटा में आइटमों की संख्या निर्धारित करना चाहता था, तो नए आइटमों को धक्का देते समय मैं गतिशील रूप से 'आईडी' को परिभाषित कर सकता हूं; मुझे यह कैसे करना है?
हडसन एटवेल

@ हडसनअवेल: data.itemsएक सरणी है। एरे के पास एक lengthसंपत्ति है। :-)
टीजे क्राउडर

पुश करते समय मुझे हमेशा "... कोई विधि धक्का नहीं होता है"। हम्म ... क्या गलत पता नहीं चल सकता ...
शालिक

@TJCrowder, इसे हटाने के लिए संभव है id = 5अद्यतन कर सकते हैं और यह भी nameके लिए id=6करने के लिएToy
मौर्य

अगर JSON ऑब्जेक्ट को json ऑब्जेक्ट को पुश करने की ज़रूरत है, तो $ .exetend का उपयोग करें। जैसा कि पीटर ड्रिनन के नीचे stackoverflow.com/a/17976034/2466650
साई

19

ब्याह अच्छा है, हर कोई ब्याह समझाता है तो मैंने उसे नहीं समझाया। आप जावास्क्रिप्ट में कीवर्ड हटा सकते हैं , यह अच्छा है। आप jQuery का उपयोग करके $ .grep का भी हेरफेर कर सकते हैं ।

JQuery रास्ता:

data.items = jQuery.grep(
                data.items, 
                function (item,index) { 
                  return item.id !=  "1"; 
                });

DELETE वे:

delete data.items[0]

PUSH जोड़ने के लिए बेहतर है ब्याह, क्योंकि ब्याह भारी भारित कार्य है। स्प्लिस एक नई सरणी बनाता है, यदि आपके पास सरणी का विशाल आकार है तो यह परेशानी हो सकती है। डिलीट करना कुछ समय के लिए उपयोगी होता है, डिलीट करने के बाद अगर आप एरे की लंबाई को देखते हैं तो वहां लंबाई में कोई बदलाव नहीं होता है। इसलिए इसका इस्तेमाल समझदारी से करें।


आप पिछले पैराग्राफ में क्या कहना चाह रहे हैं? यह इतना धूमिल है, मुझे एक बात समझ में नहीं आई।
डेसेबल

1
वोड डाउन! इसके नष्ट न होने के लिए बस अपरिभाषित संबंधित सूचकांक

13

यदि आप jQuery का उपयोग कर रहे हैं, तो आप नए आइटम जोड़ने के लिए विस्तार फ़ंक्शन का उपयोग कर सकते हैं।

var olddata = {"fruit":{"apples":10,"pears":21}};

var newdata = {};
newdata['vegetables'] = {"carrots": 2, "potatoes" : 5};

$.extend(true, olddata, newdata);

यह उत्पन्न करेगा:

{"fruit":{"apples":10,"pears":21}, "vegetables":{"carrots":2,"potatoes":5}};

8

यह JSON बिल्कुल भी नहीं है, यह सिर्फ जावास्क्रिप्ट ऑब्जेक्ट्स है। JSON डेटा का एक पाठ प्रतिनिधित्व है, जो जावास्क्रिप्ट सिंटैक्स के सबसेट का उपयोग करता है।

JQuery का उपयोग करके JSON में हेरफेर करने के बारे में आपको कोई जानकारी नहीं मिल सकती है इसका कारण यह है कि jQuery के पास ऐसा कुछ भी नहीं है जो यह कर सकता है, और यह आमतौर पर बिल्कुल भी नहीं किया जाता है। आप जावास्क्रिप्ट ऑब्जेक्ट्स के रूप में डेटा में हेरफेर करते हैं, और फिर इसे JSON स्ट्रिंग में बदल देते हैं यदि आपको इसकी आवश्यकता है। (jQuery में रूपांतरण के लिए विधियाँ हैं, हालाँकि)

आपके पास जो बस एक वस्तु है जिसमें एक सरणी है, इसलिए आप उन सभी ज्ञान का उपयोग कर सकते हैं जो आपके पास पहले से हैं। बस data.itemsसरणी तक पहुँचने के लिए उपयोग करें।

उदाहरण के लिए, गतिशील मानों का उपयोग करके सरणी में एक और आइटम जोड़ने के लिए:

// The values to put in the item
var id = 7;
var name = "The usual suspects";
var type = "crime";
// Create the item using the values
var item = { id: id, name: name, type: type };
// Add the item to the array
data.items.push(item);

5

किसी ऑब्जेक्ट को json सरणी में जोड़ना

var arrList = [];
var arr = {};   
arr['worker_id'] = worker_id;
arr['worker_nm'] = worker_nm;
arrList.push(arr);

किसी वस्तु को किसी जसन से हटाना

यह मेरे लिए कार्यकर्ता है।

  arrList = $.grep(arrList, function (e) { 

        if(e.worker_id == worker_id) {
            return false;
        } else {
            return true;
        }
    });

यह उस ऑब्जेक्ट के बिना एक सरणी देता है।

आशा करता हूँ की ये काम करेगा।


3

ठीक है, यह सिर्फ एक जावास्क्रिप्ट ऑब्जेक्ट है, इसलिए आप data.itemsउसी तरह हेरफेर कर सकते हैं जैसे आप एक साधारण सरणी करेंगे। यदि तुम करो:

data.items.pop();

आपका itemsसरणी 1 आइटम छोटा होगा।


1

चीजों को सरल रखें :)

var my_form_obj = {};
my_form_obj.name = "Captain America";
my_form_obj.weapon = "Shield";

उम्मीद है की यह मदद करेगा!


0

प्रयत्न

data.items.pop();
data.items.push({id: "7", name: "Matrix", type: "adult"});

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