-1

I'm using googles geochart to draw a map with stats but I can't figure out how to combine my 2 arrays

I get this from the server.

[["DZ", 0], ["EG", 0], ["EH", 0], ["LY", 0], ["MA", 0], ["SD", 0], ["SS", 0], ["TN", 0], ["BF", 0], ["BJ", 0], ["CI", 0], ["CV", 0], ["GH", 0], ["GM", 0], ["GN", 0], ["GW", 0], ["LR", 0], ["ML", 0], ["MR", 0], ["NE", 0], ["NG", 0], ["SH", 0], ["SL", 0], ["SN", 0], ["TG", 0], ["AO", 0], ["CD", 0], ["ZR", 0], ["CF", 0], ["CG", 0], ["CM", 0], ["GA", 0], ["GQ", 0], ["ST", 0], ["TD", 0], ["BI", 0], ["DJ", 0], ["ER", 0], ["ET", 0], ["KE", 0], ["KM", 0], ["MG", 0], ["MU", 0], ["MW", 0], ["MZ", 0], ["RE", 0], ["RW", 0], ["SC", 0], ["SO", 0], ["TZ", 0], ["UG", 0], ["YT", 0], ["ZM", 0], ["ZW", 0], ["BW", 0], ["LS", 0], ["NA", 0], ["SZ", 0], ["ZA", 0], ["GG", 0], ["JE", 0], ["AX", 0], ["DK", 0], ["EE", 0], ["FI", 0], ["FO", 0], ["GB", 0], ["IE", 0], ["IM", 0], ["IS", 0], ["LT", 0], ["LV", 0], ["NO", 0], ["SE", 0], ["SJ", 0], ["AT", 0], ["BE", 0], ["CH", 0], ["DE", 1], ["DD", 0], ["FR", 0], ["FX", 0], ["LI", 0], ["LU", 0], ["MC", 0], ["NL", 0], ["BG", 0], ["BY", 0], ["CZ", 0], ["HU", 0], ["MD", 0], ["PL", 0], ["RO", 0], ["RU", 0], ["SU", 0], ["SK", 0], ["UA", 0], ["AD", 0], ["AL", 0], ["BA", 0], ["ES", 0], ["GI", 0], ["GR", 0], ["HR", 0], ["IT", 0], ["ME", 0], ["MK", 0], ["MT", 0], ["RS", 0], ["PT", 0], ["SI", 0], ["SM", 0], ["VA", 0], ["YU", 0], ["BM", 0], ["CA", 0], ["GL", 0], ["PM", 0], ["US", 0], ["AG", 0], ["AI", 0], ["AN", 0], ["AW", 0], ["BB", 0], ["BL", 0], ["BS", 0], ["CU", 0], ["DM", 0], ["DO", 0], ["GD", 0], ["GP", 0], ["HT", 0], ["JM", 0], ["KN", 0], ["KY", 0], ["LC", 0], ["MF", 0], ["MQ", 0], ["MS", 0], ["PR", 0], ["TC", 0], ["TT", 0], ["VC", 0], ["VG", 0], ["VI", 0], ["BZ", 0], ["CR", 0], ["GT", 0], ["HN", 0], ["MX", 0], ["NI", 0], ["PA", 0], ["SV", 0], ["AR", 0], ["BO", 0], ["BR", 0], ["CL", 0], ["CO", 0], ["EC", 0], ["FK", 0], ["GF", 0], ["GY", 0], ["PE", 0], ["PY", 0], ["SR", 0], ["UY", 0], ["VE", 0], ["TM", 0], ["TJ", 0], ["KG", 0], ["KZ", 0], ["UZ", 0], ["CN", 0], ["HK", 0], ["JP", 0], ["KP", 0], ["KR", 0], ["MN", 0], ["MO", 0], ["TW", 0], ["AF", 0], ["BD", 0], ["BT", 0], ["IN", 0], ["IR", 0], ["LK", 0], ["MV", 0], ["NP", 0], ["PK", 0], ["BN", 0], ["ID", 0], ["KH", 0], ["LA", 0], ["MM", 0], ["BU", 0], ["MY", 0], ["PH", 0], ["SG", 0], ["TH", 0], ["TL", 0], ["TP", 0], ["VN", 0], ["AE", 0], ["AM", 0], ["AZ", 0], ["BH", 0], ["CY", 0], ["GE", 0], ["IL", 0], ["IQ", 0], ["JO", 0], ["KW", 0], ["LB", 0], ["OM", 0], ["PS", 0], ["QA", 0], ["SA", 0], ["NT", 0], ["SY", 0], ["TR", 0], ["YE", 0], ["YD", 0], ["AU", 0], ["NF", 0], ["NZ", 0], ["FJ", 0], ["NC", 0], ["PG", 0], ["SB", 0], ["VU", 0], ["FM", 0], ["GU", 0], ["KI", 0], ["MH", 0], ["MP", 0], ["NR", 0], ["PW", 0], ["AS", 0], ["CK", 0], ["NU", 0], ["PF", 0], ["PN", 0], ["TK", 0], ["TO", 0], ["TV", 0], ["WF", 0], ["WS", 0]]

and I need to put it into this array

geoArray = [["Country", "Clicks"]];

This is my current code

async function drawRegionsMap() {
  geoArray = [["Country", "Clicks"]];

  await fetch(`http://127.0.0.1:80/grab`, {
    method: "post",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
    },

    body: JSON.stringify({
      token: token,
      key: "grab_geo_stats",
    }),
  })
    .then((response) => {
      return response.json();
    })
    .then((data) => {
      for (var i = 0; i < data.message.length; i++) {
        geoArray.push(data.message[i]);
      }

      var data = google.visualization.arrayToDataTable(geoArray);

      var options = {
        legend: "none",
        backgroundColor: "transparent",
        datalessRegionColor: "#62bcfc",
        colors: "#527aff",
        width: "695",
        height: "390",
        interactive: true,
        tooltip: {
          isHtml: true,
        },
      };

      chart = new google.visualization.GeoChart(
        document.getElementById("regions_div")
      );
      chart.draw(data, options);
    });
}

It should look like this

[
    ['Country', 'Popularity'],
    ['Germany', 200],
    ['United States', 300],
    ['Brazil', 400],
    ['Canada', 500],
    ['France', 600],
    ['RU', 700]
]
Aksel Glyholt
  • 11
  • 3

3 Answers3

0

You can use the spread operator:

geoArray.push(...someData);

someData is here the data you want to put in the geoArray array.

Let say someData is [["A", 0], ["B", 0]], as push takes an infinite number of arguments, what it will do it's that it will unwrap the content of someData and only returns the items on the array.

It's like writing the following code:

geoArray.push(["A", 0], ["B", 0]);
Johan
  • 68
  • 1
  • 1
  • 7
  • Now it's like this ``` [0 … 99] [100 … 199] [200 … 299] [300 … 399] [400 … 499] [500 … 599] [600 … 699] [700 … 799] [800 … 899] [900 … 999] [1000 … 1099] [1100 … 1199] [1200 … 1299] [1300 … 1399] ``` It needs to be like this ``` ['Country', 'Popularity'], ['Germany', 200], ['United States', 300], ['Brazil', 400], ['Canada', 500], ['France', 600], ['RU', 700] ``` – Aksel Glyholt Mar 18 '23 at 13:50
  • @AkselGlyholt - Maybe throw us a bone and tell us what you *want* the result to look like? – T.J. Crowder Mar 18 '23 at 13:52
  • It should look like this ['Country', 'Popularity'], ['Germany', 200], ['United States', 300], ['Brazil', 400], ['Canada', 500], ['France', 600], ['RU', 700] – Aksel Glyholt Mar 18 '23 at 13:53
  • So you want to merge `[['Country', 'Popularity']]` with `[['Germany', 200], ['United States', 300], ['Brazil', 400], ['Canada', 500], ['France', 600], ['RU', 700]]` ? – Johan Mar 18 '23 at 14:20
0

For combing multiple arrays into the single array do something like ->

const combinedArray = [...arr1, ...arr2, ...arrN];

So assuming that the data you get back as a response is an Array then you can do,

const mapData = [...geoArray, ...data];

This will merge your both arrays into on single array!

Ayush Dedhia
  • 53
  • 7
0

To push the response data in the end of geoData array insted of doing

for (var i = 0; i < data.message.length; i++) {
        geoArray.push(data.message[i]);

you can replace it with

geoArray.push(...data)
Adarsh Gupta
  • 1
  • 2