0

I have a large string from a file. Csv file that I converted into a textarea. It is separated by "," (comma). eg part of string.

<textarea>rank,place,population,lat,lon 1,New York city,8175133,40.71455,-74.007124 2,Los Angeles city,3792621,34.05349,-118.245323 3,Chicago city,2695598,45.37399,-92.888759 4,Houston city,2099451,41.337462,-75.733627 5,Philadelphia city,1526006,37.15477,-94.486114 6,Phoenix city,1445632,32.46764,-85.000823 7,San Antonio city,1327407,37.706576,-122.440612 8,San Diego city,1307402,37.707815,-122.466624 9,Dallas city,1197816,40.636,-91.168309 10,San Jose city,945942,41.209716,-112.003047 11,Jacksonville city,821784,30.2887,-81.391794 12,Indianapolis city (balance),820445,39.766911,-86.149963 13,Austin city,790390,28.973405,-95.961284 14,San Francisco city,805235,28.371795,-82.187909 15,Columbus city,787033,41.258735,-91.374424 16,Fort Worth city,741206,38.0016,-89.066334 17,Charlotte city,731424,39.09931,-76.817799 18,Detroit city,713777,42.408871,-83.002647 19,El Paso city,649121,41.645415,-91.599794 20,Memphis city,646889,35.149681,-90.04892 21,Boston city,617594,41.202364,-112.032315 22,Seattle city,608660,45.520615,-123.873929 23,Denver city,600158,32.96438,-102.829919 24,Baltimore city,620961,39.284664,-76.62022 25,Washington city,601723,38.899101,-77.028999 26,Nashville-Davidson metropolitan government (balance),601222,45.304048,-121.756365 27,Louisville/Jefferson County metro government (balance),597337,45.304048,-121.756365 28,Milwaukee city,594833,43.041809,-87.906837 29,Portland city,583776,45.52186,-123.882594 30,Oklahoma City city,579999,39.05514,-96.816104 31,Las Vegas city,583756,40.4879,-85.609999 32,Albuquerque city,545852,35.084179,-106.648643 33,Tucson city,520116,41.644727,-91.601947 34,Fresno city,494665,38.645741,-77.321863 35,Sacramento city,466488,38.915291,-121.594651 36,Long Beach city,462257,29.748022,-94.827603 37,Kansas City city,459787,39.016682,-96.864303 38,Mesa city,439041,30.686452,-97.700842 39,Virginia Beach city,437994,36.767408,-76.047707 40,Atlanta city,420003,37.691375,-122.454979 41,Colorado Springs city,416427,40.17676,-75.547839 42,Raleigh city,403892,41.132609,-73.977405 43,Omaha city,408958,41.260689,-95.94059 44,Miami city,399457,41.63636,-91.501889 45,Tulsa city,391906,39.095215,-121.613384 46,Oakland city,390724,38.334108,-87.345139 47,Cleveland city,396815,36.640475,-82.582569 48,Minneapolis city,382578,44.979031,-93.264931 49,Wichita city,382368,37.686981,-97.335579 50,Arlington city,365438,41.29525,-88.25278</textarea>

Knowing that created a framework that leaves my data in a table format. The code is this:

var data = $("textarea").val();
var lines = data.split("\n"),
    output = [],
    i;
for (i = 0; i < lines.length; i++)
    output.push("<tr><td>" + lines[i].slice(0,-1).split(",").join("</td><td>") + "</td></tr>");
output = "<table>" + output.join("") + "</table>";
 $('#fileDisplayArea').text(output);

Realize that I'm adding the structure of tables in .text(), Why if I put .html() it breaks my browser for that string is gigantic! Thus the data are well inside the div:

<table><tr><td>rank</td><td>place</td><td>population</td><td>lat</td><td>lo</td></tr><tr><td>1</td><td>New York city</td><td>8175133</td><td>40.71455</td><td>-74.00712</td></tr><tr><td>2</td><td>Los Angeles city</td><td>3792621</td><td>34.05349</td><td>-118.24532</td></tr><tr><td>3</td><td>Chicago city</td><td>2695598</td><td>45.37399</td><td>-92.88875</td></tr><tr><td>4</td><td>Houston city</td><td>2099451</td><td>41.337462</td><td>-75.73362</td></tr><tr><td>5</td><td>Philadelphia city</td><td>1526006</td><td>37.15477</td><td>-94.48611</td></tr><tr><td>6</td><td>Phoenix city</td><td>1445632</td><td>32.46764</td><td>-85.00082</td></tr><tr><td>7</td><td>San Antonio city</td><td>1327407</td><td>37.706576</td><td>-122.44061</td></tr><tr><td>8</td><td>San Diego city</td><td>1307402</td><td>37.707815</td><td>-122.46662</td></tr><tr><td>9</td><td>Dallas city</td><td>1197816</td><td>40.636</td><td>-91.16830</td></tr><tr><td>10</td><td>San Jose city</td><td>945942</td><td>41.209716</td><td>-112.00304</td></tr><tr><td>11</td><td>Jacksonville city</td><td>821784</td><td>30.2887</td><td>-81.39179</td></tr><tr><td>12</td><td>Indianapolis city (balance)</td><td>820445</td><td>39.766911</td><td>-86.14996</td></tr><tr><td>13</td><td>Austin city</td><td>790390</td><td>28.973405</td><td>-95.96128</td></tr><tr><td>14</td><td>San Francisco city</td><td>805235</td><td>28.371795</td><td>-82.18790</td></tr><tr><td>15</td><td>Columbus city</td><td>787033</td><td>41.258735</td><td>-91.37442</td></tr><tr><td>16</td><td>Fort Worth city</td><td>741206</td><td>38.0016</td><td>-89.06633</td></tr><tr><td>17</td><td>Charlotte city</td><td>731424</td><td>39.09931</td><td>-76.81779</td></tr><tr><td>18</td><td>Detroit city</td><td>713777</td><td>42.408871</td><td>-83.00264</td></tr><tr><td>19</td><td>El Paso city</td><td>649121</td><td>41.645415</td><td>-91.59979</td></tr><tr><td>20</td><td>Memphis city</td><td>646889</td><td>35.149681</td><td>-90.0489</td></tr><tr><td>21</td><td>Boston city</td><td>617594</td><td>41.202364</td><td>-112.03231</td></tr><tr><td>22</td><td>Seattle city</td><td>608660</td><td>45.520615</td><td>-123.87392</td></tr><tr><td>23</td><td>Denver city</td><td>600158</td><td>32.96438</td><td>-102.82991</td></tr><tr><td>24</td><td>Baltimore city</td><td>620961</td><td>39.284664</td><td>-76.6202</td></tr><tr><td>25</td><td>Washington city</td><td>601723</td><td>38.899101</td><td>-77.02899</td></tr><tr><td>26</td><td>Nashville-Davidson metropolitan government (balance)</td><td>601222</td><td>45.304048</td><td>-121.75636</td></tr><tr><td>27</td><td>Louisville/Jefferson County metro government (balance)</td><td>597337</td><td>45.304048</td><td>-121.75636</td></tr><tr><td>28</td><td>Milwaukee city</td><td>594833</td><td>43.041809</td><td>-87.90683</td></tr><tr><td>29</td><td>Portland city</td><td>583776</td><td>45.52186</td><td>-123.88259</td></tr><tr><td>30</td><td>Oklahoma City city</td><td>579999</td><td>39.05514</td><td>-96.81610</td></tr><tr><td>31</td><td>Las Vegas city</td><td>583756</td><td>40.4879</td><td>-85.60999</td></tr><tr><td>32</td><td>Albuquerque city</td><td>545852</td><td>35.084179</td><td>-106.64864</td></tr><tr><td>33</td><td>Tucson city</td><td>520116</td><td>41.644727</td><td>-91.60194</td></tr><tr><td>34</td><td>Fresno city</td><td>494665</td><td>38.645741</td><td>-77.32186</td></tr><tr><td>35</td><td>Sacramento city</td><td>466488</td><td>38.915291</td><td>-121.59465</td></tr><tr><td>36</td><td>Long Beach city</td><td>462257</td><td>29.748022</td><td>-94.82760</td></tr><tr><td>37</td><td>Kansas City city</td><td>459787</td><td>39.016682</td><td>-96.86430</td></tr><tr><td>38</td><td>Mesa city</td><td>439041</td><td>30.686452</td><td>-97.70084</td></tr><tr><td>39</td><td>Virginia Beach city</td><td>437994</td><td>36.767408</td><td>-76.04770</td></tr><tr><td>40</td><td>Atlanta city</td><td>420003</td><td>37.691375</td><td>-122.45497</td></tr><tr><td>41</td><td>Colorado Springs city</td><td>416427</td><td>40.17676</td><td>-75.54783</td></tr><tr><td>42</td><td>Raleigh city</td><td>403892</td><td>41.132609</td><td>-73.97740</td></tr><tr><td>43</td><td>Omaha city</td><td>408958</td><td>41.260689</td><td>-95.9405</td></tr><tr><td>44</td><td>Miami city</td><td>399457</td><td>41.63636</td><td>-91.50188</td></tr><tr><td>45</td><td>Tulsa city</td><td>391906</td><td>39.095215</td><td>-121.61338</td></tr><tr><td>46</td><td>Oakland city</td><td>390724</td><td>38.334108</td><td>-87.34513</td></tr><tr><td>47</td><td>Cleveland city</td><td>396815</td><td>36.640475</td><td>-82.58256</td></tr><tr><td>48</td><td>Minneapolis city</td><td>382578</td><td>44.979031</td><td>-93.26493</td></tr><tr><td>49</td><td>Wichita city</td><td>382368</td><td>37.686981</td><td>-97.33557</td></tr><tr><td>50</td><td>Arlington city</td><td>365438</td><td>41.29525</td><td>-88.2527</td></tr></table>

I need to get the contents of *<tr>* containing his first *<td>* equal to "2" in the third <td> an alert. In this case appear the number "3792621" in the alert.

Need to do this in. Text ()!

http://jsfiddle.net/JoaoFelipePego/frvQ2/136/ Thanks!

Shaunak D
  • 20,588
  • 10
  • 46
  • 79
pegoj
  • 67
  • 1
  • 8
  • In short do you need the value for Los angeles city? – Shaunak D Jun 15 '14 at 04:32
  • Yes,first ** equal to "2" in the third an alert. In this case appear the number "3792621" in the alert. – pegoj Jun 15 '14 at 04:33
  • I'm still not understanding **first `` equal to "2"** – Shaunak D Jun 15 '14 at 04:34
  • And you cannot use .text() to append html. You have to use .html() – Shaunak D Jun 15 '14 at 04:35
  • The first column is the ID right? Knowing this I know that every first each is referring to ID! So I need to fetch only the row that has your ID equal to 2 seek information from the third column. Get it? : D – pegoj Jun 15 '14 at 04:38
  • My real code is 10x what is not in the textarea. Putting on .Html () it crash my browser !! – pegoj Jun 15 '14 at 04:39
  • It does not crash. All the data is text. If you use .text() it is too difficult to use jQury to find it. But if you use html() it appends data to the DOM. And easy with jQuery. See this. It does not crash http://jsfiddle.net/frvQ2/137/ – Shaunak D Jun 15 '14 at 04:42
  • Yes Friend:.. What happens is that I have a csv file as more than 8mil rows and I'm passing it to html It comes in the exact way like this in textarea of my fiddle, but in a reduced form If I apply. html code these data the browser does not support as much information and breakage. Even turning to object. the only way I can display the data. csv file on the screen and through. text (). Gotta understand my situation now? – pegoj Jun 15 '14 at 04:45

2 Answers2

2

Your CSV data is malformed. The separator between lines is a space " " character, not a newline "\n" character. Therefore, there is no way for a computer to know when your next data point starts. You will have to either wrap all cities into quotation marks so that the spaces don't register as indicators for a new datapoint. For example

instead of

New York city

Do this:

"New York city"

As a result, your code data.split("\r") doesn't do anything, because there is no "\r" to split with. However, it works when you do data.split(" ").

Since you have 50 expected ranked cities, running the above command(s) should give me an array of 51 objects (50 cities + 1 header). However, running data.split("\r") does nothing. Running data.split(" ") gives me 121 results!

Check the fiddle with my updated code.

FINAL VERSION: http://jsfiddle.net/frvQ2/139/

Monarch Wadia
  • 4,400
  • 4
  • 36
  • 37
  • Then underwrite the commas in quotation marks with replace (/\,/g, "\"\"").; would work? – pegoj Jun 15 '14 at 03:10
  • The problem is that spaces " " are overloaded. It signals both, a gap between letters, as well as the end of a datapoint. You need to handle spaces, rather than quotations or commas. – Monarch Wadia Jun 15 '14 at 03:13
  • Pay attention when I say I can not use .Html() because I have a huge string that I get from. Csv file and if I move it to html breaks my browser! I Need leaves .Text()! – pegoj Jun 15 '14 at 03:14
  • Your regular expression should be /[0-9](\s)/. – Monarch Wadia Jun 15 '14 at 03:18
  • Regular expression for that? so that I can use. html () without breaking my browser? – pegoj Jun 15 '14 at 03:21
  • @pegoj yes, regular expression to replace all spaces after longitudes, which is the end of your line. – Monarch Wadia Jun 15 '14 at 03:24
  • @pegoj Fixed again! The last fiddle was replacing the last digit in the longitude as well. Please accept as best answer :) – Monarch Wadia Jun 15 '14 at 03:39
  • My real code is 10x what is not in the textarea. Putting on .Html () it crash my browser !! I need to get the contents of ** containing his first ** equal to "2" in the third an alert. In this case appear the number "3792621" in the alert. – pegoj Jun 15 '14 at 03:49
  • It's better to abstract the data away from the representation. Check this: http://jsfiddle.net/frvQ2/139/ – Monarch Wadia Jun 15 '14 at 23:38
  • Have I solved my problem in use .Html()! Now your code works :) http://stackoverflow.com/questions/17472313/using-javascript-filereader-with-huge-files – pegoj Jun 15 '14 at 23:42
0

When you have a html string, say, data, you manipulate it without adding it to the DOM as follows: 

var rows = $(data).find('tr').filter(function(){ 
    return $(this).children('td').eq(2).text() == 2;
});

This should return rows which have the content 2 in the third cell.

Perhaps the issue of a large string causing issues with .html() could be resolved by taking this approach:

var table = $('<table/>');
for (i = 0; i < lines.length; i++)
    table.append("<tr><td>" + lines[i].slice(0,-1).split(",").join("</td><td>") + "</td></tr>");
$('#fileDisplayArea').html(table);
PeterKA
  • 24,158
  • 5
  • 26
  • 48
  • My string "data" contains the tag. How do the filter inside it? – pegoj Jun 15 '14 at 02:56
  • What happens is that the table structure inside the div id = "fileDisplayArea" as text. For me display the data of the cell in the warning code does not work: ( http://jsfiddle.net/JoaoFelipePego/frvQ2/130/ – pegoj Jun 15 '14 at 03:07
  • A little explanation with the code always makes a better answer. – Brad Koch Jun 15 '14 at 03:23
  • Your jsfiddle works fine if you replace text with html. I did not realize that YOU HAVE ONLY ONE ROW. – PeterKA Jun 15 '14 at 03:25
  • @user3558931 Works by having only a small part of the code inside the textarea. My real code is 10x what is not in the textarea. Putting on. Html () it crash my browser UPDATE MY CODE http://jsfiddle.net/JoaoFelipePego/frvQ2/130/ – pegoj Jun 15 '14 at 03:31
  • Ok. My bad. Would my suggestion above resolve the issue with .html()? – PeterKA Jun 15 '14 at 03:42
  • It has to be with .text() With .Html() Crash my browser :( – pegoj Jun 15 '14 at 03:47
  • I'm confused now. Browser breaks because you're adding long html. But now you're adding a jQuery object. That breaks browsers too? – PeterKA Jun 15 '14 at 03:52
  • Yes Friend:.. (What happens is that I have a csv file as more than 8mil rows and I'm passing it to html It comes in the exact way like this in textarea of my fiddle, but in a reduced form If I apply. html code these data the browser does not support as much information and breakage. Even turning to object. the only way I can display the data. csv file on the screen and through. text (). Gotta understand my situation now? – pegoj Jun 15 '14 at 04:10