How to create a map from an existing database

[anand-010]

I have a JSON data loaded from the server
data looks like this:
[array]
- country name
- count (value )
How do I display this into the map with other counties (not included in the array) value to be zero and countries present in the array with the count value?

[sgratzl]

can you describe where you are stuck, cause as far as I can see, it is

1. fetching the data from the server
2. have a topojson file with all the countries
   1 .mixing them both to create the required {feature, value} data structure
3. feeding that into the library

[anand-010]

Finally code working can you find a way to work this code in an optimum way.

  // world map
  fetch('https://unpkg.com/world-atlas/countries-110m.json').then((r) => r.json()).then((data) => {
    let canvas = document.getElementById('world_map') as
    HTMLCanvasElement;
    let context = canvas.getContext("2d");
    const countries = ChartGeo.topojson.feature(data, data.objects.countries).features;
    console.log(ChartGeo.topojson);
    
    // TODO additional
    let mycontrylist = [{counry: 'India',count:10},{counry:'South Korea',count:15},{counry:'Vietnam',count:8}];
    let display_list = [];
    countries.forEach(element => {
      let flag:any = {flag:false};
      mycontrylist.forEach((elem)=>{
        var temp = element.properties.name === elem.counry;
        // console.log(temp);
        if (temp) {
          let t2 = countries.find((d) => d.properties.name === elem.counry);
          flag = { feature: t2, flag:true, value:elem.count};
        }
      })
      if (flag.flag) {
        console.log(flag);   
        display_list.push({feature : flag.feature, value: flag.value})
      }
      else{
        display_list.push({feature: element, value: 0 })
      }
    });
    // console.log("contries",countries.map((d) => d.properties.name));

    this.world_map = new Chart(context, {
      type: 'choropleth',
      data: {
        labels: countries.map((d) => d.properties.name),
        datasets: [{
          label: 'Countries',
          // data: countries.map((d) => ({feature: d, value: Math.random()})),
          data: display_list,
        }]
      },
      options: {
        showOutline: true,
        showGraticule: true,
        legend: {
          display: false
        },
        scale: {
          projection: 'equalEarth'
        },
        geo: {
          colorScale: {
            display: true,
          },
        },
      }
    });
  });

[sgratzl]

could be rewritten to

let mycontrylist = [{counry: 'India',count:10},{counry:'South Korea',count:15},{counry:'Vietnam',count:8}];

const lookup = new Map(mycontrylist.map((d) => [d.counry, d.count]));

const display_list = countries.map((element) => {
 return {
     feature: element,
     value: lookup.get(element.properties.name) || 0,
  };
});

[anand-010]

Thank you for your help Mr Samuel Gratzl.
It's working.
I am closing this issue with a smiling face.