Блог

Я пытаюсь открыть локальный файл json, просмотреть каждый объект в нем и импортировать всю информацию об объекте, «Страна» которого соответствует заранее определенному имени var.

Мой файл JSON (./olympics.json) выглядит примерно так:

 {
"list": [
{
  "Country": "United States",
  "IOC": "USA",
  "Summer_Gold": "1,070",
  "Summer_Silver": 841,
  "Summer_Bronze": 745,
  "Summer_Total": "2,656",
  "Winter_Gold": 105,
  "Winter_Silver": 113,
  "Winter_Bronze": 89,
  "Winter_Total": 307,
  "Total_Gold": "1,175",
  "Total_Silver": 954,
  "Total_Bronze": 834,
  "Total_Total": "2,963"
},
...
]}
 

И то, что я пытался сделать, было:

 $(".ModArea").click(function() {
  var name = $(this).attr('title');
  $("#country_name").html(name);
  var json = require('./olympics.json');
  var array = json.list;
  for (var i = 0; i < array.length; i  ) {
    var check = array[i];
    if (check["Country"] === name) {
      var ioc = check["IOC"];
    }
  }
  $("#IOC").html(ioc);
});
 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="europe_img" src="https://mapswire.com/download/europe/europe-political-map-miller.jpg" usemap="#europe" alt="Europe">
<map name="europe">
        <area class="ModArea" target="" alt="Iceland" title="Iceland" coords="138,388,35,540,232,748,549,585,516,374"
              shape="poly" data-toggle="modal" data-target="#Modal">
              
        <div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
             aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="country_name"></h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">amp;times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p id="IOC">IOC: </p>
                    </div>
                </div>
            </div>
        </div>
    </map>
 

Часть о редактировании заголовка модала работает отлично, в то время как часть о МОК вообще не работает, может кто-нибудь помочь мне понять, почему?

Прежде всего, вы определяете переменную ioc внутри оператора if. Он не имеет никакого значения за пределами этого блока, и именно поэтому ваш код ведет себя так, как он есть.

Кроме того, я бы посоветовал вам использовать метод find() массива. Вы можете изменить свой код, чтобы он выглядел следующим образом:

 $(".ModArea").click(function() {
  var name = $(this).attr('title');
  $("#country_name").html(name);
  var json = require('./olympics.json');

  $("#IOC").html(json.list.find(element => element.Country === name));
});
 

Он короче, использует более современный API и обладает лучшей производительностью благодаря оптимизации, которую предлагает функция find ().