-1

How can i generate this kind of object from for loop below in line :

  data_color.push({ [myJson_departement_list[x]['code_dept']]: { fillkey: interval } });

Object to have :

  AI: {
    fillKey: "#EDE8D6",
   },
  AL: {
    fillKey: "#e60515",
  },
  AP: {
    fillKey: "#e64515",
  },
  ..
  ...
  .

loop:

import departement_list from "../data/departements-region.json";
let myJson_departement_list,
stringified_departement_list = JSON.stringify(departement_list);
myJson_departement_list = JSON.parse(stringified_departement_list);
let subkeys2 = Object.keys(myJson_departement_list[0]);

let data_color = {};

for (let x in myJson_departement_list) {
  let dept_name = myJson_departement_list[x]["dep_name"];
  let total_parrainage = departement[dept_name];

  myJson_departement_list[x]["total_parrainages"] = total_parrainage;

  let interval = "1-50";
 if (total_parrainage <= 0) {
    interval = "defaultFill";
  } else if (total_parrainage > 1 && total_parrainage < 50) {
    interval = "1-50";
  } else if (total_parrainage > 51 && total_parrainage < 100) {
    interval = "51-100";
  } else if (total_parrainage > 101 && total_parrainage < 150) {
    interval = "101-150";
  } else if (total_parrainage > 151 && total_parrainage < 200) {
    interval = "151-200";
  } else if (total_parrainage > 201 && total_parrainage < 300) {
    interval = "201-300";
  } else if (total_parrainage > 301 && total_parrainage < 400) {
    interval = "301-400";
  } else {
    interval = "401-";
  }

  data_color[myJson_departement_list[x]["code_dept"]]["fillKey"] = interval;
  console.log("code_dept ", data_color[myJson_departement_list[x]]);
}

Need to call it here :

    var map = new Datamap({
      scope: "fra",
      element: document.getElementById("map-france"),
      responsive: true, 
        fills: {
        defaultFill: "#EDE8D6",
        "1-50": "#EDE8D6",
        "51-100": "#EDE8D6",
        "101-150": "#E2DABF",
        "151-200": "#CEC191",
        "201-300": "#BCAE7C",
        "301-400": "#9D893E",
        "401-": "#827131"
      },
         data: data_color,
      } 
    });

My json file contains something like this :

[
  {
    "num_dep": "01",
    "code_dept": "AI",
    "dep_name": "Ain",
    "region_name": "Auvergne-Rhône-Alpes",
    "total_parrainages": 0,
    "color_dpt": ""
  },
  {
    "num_dep": "02",
    "code_dept": "AS",
    "dep_name": "Aisne",
    "region_name": "Hauts-de-France",
    "total_parrainages": 0,
    "color_dpt": ""
  },
  {
    "num_dep": "03",
    "code_dept": "AL",
    "dep_name": "Allier",
    "region_name": "Auvergne-Rhône-Alpes",
    "total_parrainages": 0,
    "color_dpt": ""
  },
  {
    "num_dep": "04",
    "code_dept": "AP",
    "dep_name": "Alpes-de-Haute-Provence",
    "region_name": "Provence-Alpes-Côte d'Azur",
    "total_parrainages": 0,
    "color_dpt": ""
  },
  {
    "num_dep": "05",
    "code_dept": "HA",
    "dep_name": "Hautes-Alpes",
    "region_name": "Provence-Alpes-Côte d'Azur",
    "total_parrainages": 0,
    "color_dpt": ""
  }
...
..
..
.
]

When i inspect data_color, i got this :

{defaultFill: '#FFF', 1-50: '#F4F1E6', 51-100: '#EDE8D6', 101-150: '#E2DABF', 151-200: '#CEC191', …}
1-50: "#F4F1E6"
51-100: "#EDE8D6"
101-150: "#E2DABF"
151-200: "#CEC191"
201-300: "#BCAE7C"
301-400: "#9D893E"
401-: "#827131"
defaultFill: "#FFF"

I think it's not working because of then interval (example : 1-50) which does not have a quotation mark like this : "1-50"

last rendering of map that i sould have : enter image description here plugin source : https://github.com/markmarkoh/datamaps

Meryem ACHEMLAL
  • 31
  • 6
  • https://stackoverflow.com/questions/19317943/why-referencing-non-existent-property-of-an-object-in-javascript-doesnt-return Instead of indexing `["fillkey"]` try `.fillkey` see if this works. – Balaji Oct 05 '21 at 13:08
  • hey @DankDizaster thanks for your comment, i try it but it still not working: `data_color[myJson_departement_list[x]["code_dept"]].fillKey = interval;` it gives error : `Uncaught TypeError: Cannot set properties of undefined (setting 'fillKey')` – Meryem ACHEMLAL Oct 05 '21 at 13:19

1 Answers1

0

Man I went through a rabbit hole trying to solve this.

Basically data_color need to be an array [] yours is an object {} and you can't set objects as keys to other objects there was a workaround using [key]

let data_color = [];

data_color.push({ [myJson_departement_list[x]['code_dept']] : {fillkey: interval}});

These two changes might solve your problem.

The output I got

[
  { AI: { fillkey: 'defaultFill' } },
  { AS: { fillkey: 'defaultFill' } },
  { AL: { fillkey: 'defaultFill' } },
  { AP: { fillkey: 'defaultFill' } },
  { HA: { fillkey: 'defaultFill' } }
]

Edit

If you want it to be an object you can do this

let data_color = {};

data_color[myJson_departement_list[x]['code_dept']] = {fillkey: interval};

Output

{
  AI: { fillkey: 'defaultFill' },
  AS: { fillkey: 'defaultFill' },
  AL: { fillkey: 'defaultFill' },
  AP: { fillkey: 'defaultFill' },
  HA: { fillkey: 'defaultFill' }
}

For reference How to use a variable for a key in a JavaScript object literal?

Balaji
  • 795
  • 1
  • 2
  • 10