How can i compare items of a for loop with each value of a tag?

Question

i need to compare value of each <p> with items in for loop :

<div class="domtom-container">

   <div class="svg-martinique" dataset-interval="">
      <p> Martinique </p>
   </div>


   <div class="svg-nouvelle-caledonie" dataset-interval="">
      <p> Nouvelle-Calédonie </p>
   </div>


   <div class="svg-francais-de-l-etranger" dataset-interval="">
      <p> Français de l’étranger </p>
   </div>


   <div class="svg-guyane" dataset-interval="">
      <p> Guyane </p>
   </div>


   <div class="svg-polynesie-francaise" dataset-interval="">
      <p> Polynésie française </p>
   </div>


   <div class="svg-parlement-europeen" dataset-interval="">
      <p> Parlement européen </p>
   </div>


   <div class="svg-la-reunion" dataset-interval="">
      <p> La Réunion </p>
   </div>


   <div class="svg-st-pierre-et-miquelon" dataset-interval="">
      <p> Saint-Pierre et Miquelon </p>
   </div>


   <div class="svg-mayotte" dataset-interval="">
      <p> Mayotte </p>
   </div>


   <div class="svg-st-martin-barthelemy" dataset-interval="">
      <p> Saint-Martin/Saint-Barthélemy </p>
   </div>


   <div class="svg-guadeloupe" dataset-interval="">
      <p> Guadeloupe </p>
   </div>


   <div class="svg-walis-et-futuna" dataset-interval="">
      <p> Wallis et Futuna </p>
   </div>

</div>

In js i made this but it does not work :

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);

  for (let i in myJson_departement_list) {
    $(".domtom-container [dataset-interval]").each(function () {
        var $this = $(this);
        console.log("dept = ", myJson_departement_list[i]["dep_name"]);
        console.log("paragraph =  ", $this.find("p").html());
        if ($this.find("p").html() == myJson_departement_list[i]["dep_name"]) {
          // code here
        }
    });
  }

the json file contains something like that :

[
  {
    "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": ""
  },
..
..
...
.
..

When i inspect the consolelog in browser, i have this :

dept =  Ain
custom-map.js:87 paragraph =    Martinique 
custom-map.js:86 dept =  Ain
custom-map.js:87 paragraph =    Nouvelle-Calédonie 
custom-map.js:86 dept =  Ain
custom-map.js:87 paragraph =    Français de l’étranger 
custom-map.js:86 dept =  Ain
custom-map.js:87 paragraph =    Guyane 
custom-map.js:86 dept =  Ain
custom-map.js:87 paragraph =    Polynésie française 
custom-map.js:86 dept =  Ain
custom-map.js:87 paragraph =    Parlement européen 
custom-map.js:86 dept =  Ain
custom-map.js:87 paragraph =    La Réunion 
custom-map.js:86 dept =  Ain
custom-map.js:87 paragraph =    Saint-Pierre et Miquelon 
custom-map.js:86 dept =  Ain
custom-map.js:87 paragraph =    Mayotte 
custom-map.js:86 dept =  Ain
custom-map.js:87 paragraph =    Saint-Martin/Saint-Barthélemy

Why would you stringify then parse...? `departement_list` is already the array (i.e. parsed JSON) you need. Also, you probably need to `.trim()` the
content, since the whitespace matters for the string comparison. — , Oct 06 '21 at 16:16
for this : https://stackoverflow.com/questions/69450430/generate-an-object-from-data-in-for-loop-javascript — Meryem ACHEMLAL, Oct 06 '21 at 16:43
but it doesn't matter, i just try to compare values between each value of tag
and a list of values in an object like above :) — Meryem ACHEMLAL, Oct 06 '21 at 16:47
Like I thought, there's absolutely no reason to stringify the array. You're using the data stored in it, so why on earth would you turn it back into text...? Anyway, are the texts inside the
s the names of departements? If so, you should get matches *if you trim the whitespace before comparing* — , Oct 06 '21 at 18:08
@ChrisG, can i get the value in `match` and compare them inside the loop ? — Meryem ACHEMLAL, Oct 07 '21 at 09:29

score 0 · Answer 1 · answered Oct 06 '21 at 16:47

Here's how you would do it in a non-jquery world. Your test data includes no positive cases, but once you add those in, you'll see your matches.

const departments = [
  {
    "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": ""
  }
];

const paragraphs = Array.from(document.querySelectorAll('.domtom-container p')).map(domNode => domNode.innerText.trim());

const matches = {};

paragraphs.forEach(p => {

    const department = departments.filter(d => {
      return d.dep_name === p;
    }).pop() || null;

    matches[p] = department;

});
  
console.log(matches);

<div class="domtom-container">
   <div class="svg-martinique" dataset-interval="">
      <p> Martinique </p>
   </div>
   <div class="svg-nouvelle-caledonie" dataset-interval="">
      <p> Nouvelle-Calédonie </p>
   </div>
   <div class="svg-francais-de-l-etranger" dataset-interval="">
      <p> Français de l’étranger </p>
   </div>
   <div class="svg-guyane" dataset-interval="">
      <p> Guyane </p>
   </div>
   <div class="svg-polynesie-francaise" dataset-interval="">
      <p> Polynésie française </p>
   </div>
   <div class="svg-parlement-europeen" dataset-interval="">
      <p> Parlement européen </p>
   </div>
   <div class="svg-la-reunion" dataset-interval="">
      <p> La Réunion </p>
   </div>
   <div class="svg-st-pierre-et-miquelon" dataset-interval="">
      <p> Saint-Pierre et Miquelon </p>
   </div>
   <div class="svg-mayotte" dataset-interval="">
      <p> Mayotte </p>
   </div>
   <div class="svg-st-martin-barthelemy" dataset-interval="">
      <p> Saint-Martin/Saint-Barthélemy </p>
   </div>
   <div class="svg-guadeloupe" dataset-interval="">
      <p> Guadeloupe </p>
   </div>
   <div class="svg-walis-et-futuna" dataset-interval="">
      <p> Wallis et Futuna </p>
   </div>
</div>

thank you for your comment, i didn't really understand your idea :/ — Meryem ACHEMLAL, Oct 06 '21 at 17:06
First, I'm creating an array called paragraphs that contain the text in the
tags. Then I'm looping over each one, looking for a match. If there is a match, the corresponding object in the departments array will be added to the `matches` object — code_monk, Oct 07 '21 at 15:48

How can i compare items of a for loop with each value of a tag?

1 Answers1