जावास्क्रिप्ट एक सरणी

Question

में लोड हो रहा है CSV फ़ाइल मैं Wordpress में एक वेब पेज के विकास कर रहा हूँ। वेबपेज को सभी काउंटी के साथ एक combobox होना चाहिए। मैं सीएसवी प्रारूप में एक डाटासेट जो इन सभी प्रान्तों के लिए कुछ 10k पंक्तियां हैं की है। उपयोगकर्ता लटकती में एक काउंटी चयन करता है, मैं वेब पेज में दिखाया गया है केवल चयनित काउंटी डेटा चाहते हैं। यह मेरी आवश्यकता है।()

वर्डप्रेस में, मेरा वेब पेज मैं

<script type="text/javascript" src="http://xxx/wp  content/uploads/2014/05/countyList1.js"></script> 

और वेबपेज लटकती के लिए कोड का उपयोग कर js फ़ाइल द्वारा जोड़ा जा रहा

<select name="county" id="county" onload="setCounties();" onchange="getSelectedCountyData();"></select> 

countyList1.js में दाखिल मैं setCounties है और getSelectedCountyData() फ़ंक्शन।

अब तक मैं काउंटियों की सूची के साथ लटकती देख सकते हैं। मैं नहीं जानता कि कैसे CSV फ़ाइल पढ़ सकते हैं और इस सूची में चयनित काउंटी फिल्टर लागू करने के लिए।

मैं FileReader वस्तु की कोशिश की और मैं वेब पृष्ठ पर सीएसवी सामग्री लोड कर सकते हैं, लेकिन मैं सीएसवी चयन करने के लिए उपयोगकर्ता नहीं करना चाहती। मेरे पास पहले से ही डेटासेट है।

मैं इस SO पोस्ट How to read data From *.CSV file using javascript? से इस jquery.csv-0.71 लाइब्रेरी का उपयोग करने की कोशिश कर रहा हूं लेकिन मुझे सहायता चाहिए।

यहाँ कोड है जो जब एक काउंटी चयन किया जाता है

function getSelectedCountyData() { 
     cntrySel = document.getElementById('county'); 
     //selCty = countyList[cntrySel.value]; 
     handleFiles(); 
} 

function handleFiles() { 

    $(document).ready(function() { 
     $.ajax({ 
      type: "GET", 
      url: "D:\Docs\Desktop\csvfile.csv", 
      dataType: "csv", 
      success: function (data) { processData(data); } 
     }); 
    }); 
} 

function processData(allText) { 
    var allTextLines = allText.split(/\r\n|\n/); 
    var headers = allTextLines[0].split(','); 
    var lines = []; 

    for (var i = 1; i < allTextLines.length; i++) { 
     var data = allTextLines[i].split(','); 
     if (data.length == headers.length) { 

      var tarr = []; 
      for (var j = 0; j < headers.length; j++) { 
       tarr.push(headers[j] + ":" + data[j]); 
      } 
      lines.push(tarr); 
     } 
    } 
    console.log(lines); 
    drawOutput(lines); 
} 

function drawOutput(lines) { 
    //Clear previous data 
    document.getElementById("output").innerHTML = ""; 
    var table = document.createElement("table"); 
    for (var i = 0; i < lines.length; i++) { 
     var row = table.insertRow(-1); 
     for (var j = 0; j < lines[i].length; j++) { 
      var firstNameCell = row.insertCell(-1); 
      firstNameCell.appendChild(document.createTextNode(lines[i][j])); 
     } 
    } 
    document.getElementById("output").appendChild(table); 
} 

Answer 1

आप AJAX का उपयोग नहीं कर सकते हैं उपयोगकर्ता मशीन से फ़ाइलें लाने के लिए कहा जाता हो जाता है। यह इसके बारे में जाने का बिल्कुल गलत तरीका है।

उपयोग FileReader एपीआई:

<input type="file" id="file input"> 

js:

console.log(document.getElementById("file input").files); // list of File objects 

var file = document.getElementById("file input").files[0]; 
var reader = new FileReader(); 
content = reader.readAsText(file); 
console.log(content); 

तो सीएसवी के रूप में content पार्स। ध्यान रखें कि आपके पार्सर वर्तमान की तरह सीएसवी में बच गए मूल्यों के साथ सौदा नहीं है रखें: value1,value2,"value 3","value ""4"""

Answer 2

मैं अत्यधिक इस प्लगइन में देखने की सलाह देते:

http://github.com/evanplaice/jquery-csv/

मैं बड़ी CSV फ़ाइलों से निपटने के लिए एक परियोजना के लिए इस का इस्तेमाल किया और यह एक सीएसवी को एक सरणी में अच्छी तरह से पार्सिंग को संभालता है। आप इसका उपयोग स्थानीय कोड को कॉल करने के लिए कर सकते हैं जिसे आप अपने कोड में निर्दिष्ट करते हैं, इसलिए, आप फ़ाइल अपलोड पर निर्भर नहीं हैं।

एक बार जब आप प्लगइन ऊपर में शामिल हैं, आप अनिवार्य रूप से सीएसवी निम्नलिखित का उपयोग कर पार्स कर सकते हैं:

$.ajax({ 
    url: "pathto/filename.csv", 
    async: false, 
    success: function (csvd) { 
     data = $.csv.toArrays(csvd); 
    }, 
    dataType: "text", 
    complete: function() { 
     // call a function on complete 
    } 
}); 

सब कुछ तो डेटा सरणी में रहते हैं के रूप में आप की जरूरत है आप में हेरफेर करने के लिए होगा। यदि आपको आवश्यकता हो तो मैं सरणी डेटा को संभालने के लिए और उदाहरण प्रदान कर सकता हूं।

प्लगइन पेज पर कई प्रकार के बहुत सारे उदाहरण भी उपलब्ध हैं।

Answer 3

यदि आप फ़ाइल के आकार के बारे में अत्यधिक चिंतित नहीं हैं तो आपके लिए डेटा को किसी अन्य फ़ाइल में जेएस ऑब्जेक्ट के रूप में स्टोर करना और आपके अंदर आयात करना आसान हो सकता है। सिंटैक्स <script src="countries.js" async></script> का उपयोग कर सिंक्रनाइज़ या असीमित रूप से। आपको फाइल आयात करने और इसे पार्स करने की आवश्यकता पर बचाता है।

हालांकि, मैं देख सकता हूं कि आप 10000 प्रविष्टियों को फिर से लिखना क्यों नहीं चाहते हैं, इसलिए मैंने लिखा एक मूल ऑब्जेक्ट उन्मुख सीएसवी पार्सर है।

function requestCSV(f,c){return new CSVAJAX(f,c);}; 
function CSVAJAX(filepath,callback) 
{ 
    this.request = new XMLHttpRequest(); 
    this.request.timeout = 10000; 
    this.request.open("GET", filepath, true); 
    this.request.parent = this; 
    this.callback = callback; 
    this.request.onload = function() 
    { 
     var d = this.response.split('\n'); /*1st separator*/ 
     var i = d.length; 
     while(i--) 
     { 
      if(d[i] !== "") 
       d[i] = d[i].split(','); /*2nd separator*/ 
      else 
       d.splice(i,1); 
     } 
     this.parent.response = d; 
     if(typeof this.parent.callback !== "undefined") 
      this.parent.callback(d); 
    }; 
    this.request.send(); 
}; 

इस तरह का उपयोग किया जा सकता है;

var foo = requestCSV("csvfile.csv",drawlines(lines)); 

पहला पैरामीटर फ़ाइल है, इस मामले में आपकी एचटीएमएल फाइल की स्थिति के सापेक्ष फ़ाइल है। दूसरा पैरामीटर एक वैकल्पिक कॉलबैक फ़ंक्शन चलाता है जब फ़ाइल पूरी तरह से लोड हो जाती है।

यदि आपकी फ़ाइल में अलग-अलग कॉमास नहीं हैं तो यह इसके साथ नहीं आ जाएगा, क्योंकि यह रिटर्न और कॉमा पर चपेट करके 2 डी एरे बनाता है। यदि आपको उस कार्यक्षमता की आवश्यकता है तो आप regexp में देखना चाहेंगे।

//THIS works 

"1234","ABCD" \n 
"!@£$" \n 

//Gives you 
[ 
[ 
    1234, 
    'ABCD' 
], 
[ 
    '!@£$' 
] 
] 

//This DOESN'T! 

"12,34","AB,CD" \n 
"!@,£$" \n 

//Gives you 

[ 
[ 
    '"12', 
    '34"', 
    '"AB', 
    'CD' 
] 
[ 
    '"!@', 
    '£$' 
] 
] 

यदि आप ओओ विधियों के लिए उपयोग नहीं करते हैं; वे एक 'कन्स्ट्रक्टर' फ़ंक्शन के माध्यम से अपने स्वयं के स्थानीय कार्यों और चर के साथ एक नई वस्तु (जैसे संख्या, स्ट्रिंग, सरणी) बनाते हैं। कुछ स्थितियों में बहुत आसान है। इस फ़ंक्शन का उपयोग अलग-अलग कॉलबैक के साथ 10 अलग-अलग फ़ाइलों को लोड करने के लिए किया जा सकता है (सीएसवी प्यार के अपने स्तर के आधार पर!)

Answer 4

यही वह है जो मैं एक सरणी में एक सीएसवी फ़ाइल का उपयोग करता था। काम के उपरोक्त उत्तरों नहीं मिल सका, लेकिन यह मेरे लिए काम किया।

$(document).ready(function() { 
    "use strict"; 
    $.ajax({ 
     type: "GET", 
     url: "../files/icd10List.csv", 
     dataType: "text", 
     success: function(data) {processData(data);} 
    }); 
}); 

function processData(icd10Codes) { 
    "use strict"; 
    var input = $.csv.toArrays(icd10Codes); 
    $("#test").append(input); 
} 

ऊपर जुड़े jQuery-CSV प्लग-इन का उपयोग किया गया।