Проблемы с вводом пользователей в файл .json, продолжайте получать «Uncaught ReferenceError: myExp не определен»

Question

Я продолжаю получать сообщение об ошибке при попытке сопоставления входных данных пользователей с файлом .json. Вот мой .js:

$.getJSON('rote.json', function(data){ 
    var random = data.eats[Math.floor(Math.random() * data.eats.length)]; 
    var title = random[0].cat; 
    var titleLength = random[0].cat.length; 

    $("h2").html(title); 

    var output = ''; 

    $.each(random, function(key,val){ 
     var snippedFieldLength = random.length - 1; 
     output += '<input type="search" name="search" class="search" placeholder="write your tag here" /><br><br>'; 

    }); 

    $('.fields').html(output); 


    $('.search').keyup(function(){ 
     var searchField = $('.search:eq(1)').val(); 
     var myExp = new RegExp(searchField, "i"); 
     console.log(myExp); 


     var output2 = ''; 
     $.each(random, function(key,val){ 
      console.dir(val); 
      if (val.search(myExp) != -1) { 
       output2 += 'hello'; 
      } 
     }); 
     $('#update').html(output2); 
    }); 
}); 

Вот мой .json файл:

{"eats": 
    [ 
    [ 
     {"cat":"drinks"}, 
     "soda", 
     "milk" 
    ], 
    [ 
     {"cat":"food"}, 
     "burgers", 
     "fries",  
     "pizza" 
    ] 
    ] 
} 

Я пытаюсь соответствовать данным я получаю из файла .json в тексте, вставленный в поле ввода HTML сгенерированный с использованием цикла. Все это делается с помощью .json и jquery. У меня нет проблем случайным образом выбирать элементы из моей категории json «ест», и у меня нет проблем с созданием полей, которые соответствуют длине категорий (минус 1, поскольку элементы «cat» должны быть исключены), но моя проблема в том, что Я не могу заставить регулярное выражение соответствовать тексту, который пользователь вводит в .json-файл. У кого-нибудь есть идеи? Я все время получаю сообщение об ошибке «Неотдача ReferenceError: myExp не определена».

Answer 1

Ошибка, которую я получаю, когда запускаю код, является то, что undefined is not a function. Когда вы переходите через random, первым значением является объект { cat: "categoryname" }, а когда вы вызываете val.search(myExp), он получает ошибку, потому что у этого объекта нет метода .search. Решение состоит в том, чтобы проверить, является ли элемент строкой, прежде чем пытаться ее сопоставить. Или вы можете использовать $.each(random.slice(1), function() { ...}), чтобы пропустить первый элемент.

function processJson(data){ 
 
    var random = data.eats[Math.floor(Math.random() * data.eats.length)]; 
 
    var title = random[0].cat; 
 
    var titleLength = random[0].cat.length; 
 

 
    $("h2").html(title); 
 

 
    var output = ''; 
 

 
    $.each(random, function(key,val){ 
 
     var snippedFieldLength = random.length - 1; 
 
     output += '<input type="search" name="search" class="search" placeholder="write your tag here" /><br><br>'; 
 

 
    }); 
 

 
    $('.fields').html(output); 
 

 

 
    $('.search').keyup(function(){ 
 
     var searchField = $('.search:eq(1)').val(); 
 
     var myExp = new RegExp(searchField, "i"); 
 
     console.log(myExp); 
 

 

 
     var output2 = ''; 
 
     $.each(random, function(key,val){ 
 
      console.dir(val); 
 
      if (typeof val == "string" && val.search(myExp) != -1) { 
 
       output2 += 'hello'; 
 
      } 
 
     }); 
 
     $('#update').html(output2); 
 
    }); 
 
} 
 

 
var myjson = 
 
{"eats": 
 
    [ 
 
    [ 
 
     {"cat":"drinks"}, 
 
     "soda", 
 
     "milk" 
 
    ], 
 
    [ 
 
     {"cat":"food"}, 
 
     "burgers", 
 
     "fries",  
 
     "pizza" 
 
    ] 
 
    ] 
 
}; 
 

 
processJson(myjson);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h2></h2> 
 

 
Fields: 
 
<div class="fields"></div> 
 
Update: 
 
<div id="update"></div>

Лучшим решением было бы перестроить структуру данных. Массивы должны использоваться для однородных данных, объекты должны использоваться для гетерогенных данных. Поэтому неуместно иметь объект в том же массиве, что и строки. Вот как я предлагаю вам это сделать:

[ 
    { cat: "drinks", 
     members: [ 
     "soda", 
     "milk" 
     ] 
    }, 
    { cat: "food", 
     members: [ 
      "burgers", 
      "fries",  
      "pizza" 
     ] 
    } 
]