skip to Main Content

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]
]

3

Answers


  1. 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]);
    
    Login or Signup to reply.
  2. 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!

    Login or Signup to reply.
  3. 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)
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search