أواجه مشكلة في استخراج المعلومات المتطابقة عند استخدام else في جافا سكريبت

Mohamed Refaat10 · 13 فبراير 2022

مخزن مجموعة من البيانات عن طريق الـ object وقمت بإضافة حقل إدخال وزر ، واستخدمت حلقة تكرارية ودالة if بداخل الحلقة ليتم التحقق من القيمة التي تم ادخالها في الحقل وإذا كانت متطابقة يتم عرض باقي البيانات وهنا لا أجد أي مشكلة أو أي خطأ ، ولكن عند إضافة الشرط else ليتم طباعة جملة معينة في حالة عدم تطابق القيمة ولكن عند ادخال أي قيمة يتم طباعة الجملة المحددة في الشرط else حتى وإن كانت القيمة متطابقة ما عدا أخر عنصر يتم طباعته بشكل طبيعي

كود HTML

<input id="input" type="text" placeholder="ادخل القيمة هنا">
<button id="action">ابحث</button>

<table>
  <thead>
    <th>field1</th>
    <th>field2</th>
    <th>field3</th>
    <th>field4</th>
    <th>field5</th>
  </thead>
  <tbody id="demo"></tbody>
</table>

الـ Object

let fields =  [
  {
    field1: "field1 001",
    field2: "field2 001",
    field3: "field3 001",
    field4: "field4 001"
  },
  {
    field1: "field1 002",
    field2: "field2 002",
    field3: "field3 002",
    field4: "field4 002"
  },

  {
    field1: "field1 003",
    field2: "field2 003",
    field3: "field3 003",
    field4: "field4 003"
  },
  {
    field1: "field1 004",
    field2: "field2 004",
    field3: "field3 004",
    field4: "field4 004"
  },

  {
    field1: "field1 005",
    field2: "field2 005",
    field3: "field3 005",
    field4: "field4 005"
  }
];

تنفيذ المهمة عند الضغط على الزر

let action = document.getElementById("action");
action.addEventListener("click", function () {

  let input = document.getElementById("input").value,
      demo = document.getElementById("demo");

  if(input != ""){

    for (i = 0; i < fields.length; i++) {
      if(input == fields[i].field1){
        let result = "<tr><td>" + fields[i].field1 + "</td>" +
            "<td>" + fields[i].field2 + "</td>" +
            "<td>" + fields[i].field3 + "</td>" +
            "<td>" + fields[i].field4 + "</td>" +
            "<td>" + fields[i].field5 + "</td></tr>";
        demo.innerHTML = result;


      } 

      /*else {
            demo.innerHTML = "غير موجود";
	}*/

    } // end for Loop
  } else{
    demo.innerHTML = "لا يمكن ترك الحقل فارغ";
  }
});

أريد أن أعرف سبب المشكلة عند استخدام الشرط else

تم التعديل في 13 فبراير 2022 بواسطة Mohamed.Refaat

شرف الدين حفني · 13 فبراير 2022

المشكلة لديك أنك تقوم بوضع الشرط else داخل نفذ الحلقة التكرارية, وبالتالي عندما تمر أول لفة ولا يجد العنصر المطلوب يتم تنفيذ شرط else دون إنتظار المرور على باقي العناصر

الحل أن تضع متغير يتم تغييره قيمته إلى true أو false حسب إن تم إيجاد العنصر أم لا, وثم تضع شرط أن العنصر لم يتم إيجاده خارج الحلقة التكرارية لتصبح شفرتك البرمجية كالشكل التالي

var isFound = false;
let action = document.getElementById("action");
action.addEventListener("click", function () {

  let input = document.getElementById("input").value,
      demo = document.getElementById("demo");



  for (i = 0; i < fields.length; i++) {
    if(input == fields[i].field1){
      let result = "<tr><td>" + fields[i].field1 + "</td>" +
          "<td>" + fields[i].field2 + "</td>" +
          "<td>" + fields[i].field3 + "</td>" +
          "<td>" + fields[i].field4 + "</td>" +
          "<td>" + fields[i].field5 + "</td></tr>";
      demo.innerHTML = result;
	  isFound = true;

    }

  }
  if(!isFound){
            demo.innerHTML = "غير موجود";
  }
  isFound = false;
});

Hassan Hedr · 13 فبراير 2022

عند المرور على كل عنصر من العناصر أنت تقوم بالتحقق من مطابقته وفي حال عدم التطابق (مع هذا العنصر فقط) تقوم بعرض "غير موجود"، المشكلة أنه في حال تم العثور على تطابق أحد العناصر فإن التحقق التالي للعنصر الذي يليه في حال لم يتطابق أيضًا سيتم مسح النتيجة وتعيينها لـ ""غير موجود"

// item 3 بحث عن 

item 1 <-- غير موجود
item 2 <-- غير موجود
item 3 <-- موجود عرض البيانات
item 4 <-- غير موجود

الطريقة الأفضل هي تصفية العناصر المطابقة للبحث ووضعها ضمن متغير، وبعد الانتهاء من المرور على العناصر جميعها تقوم بفحص النتيجة النهائية مرة واحدة فقط وإما عرض النتائج المطابقة أو عرض "غير موجود"، سيساعدك في ذلك استخدام التوابع map و filter، يمكن أي يكون شكل الحل كالتالي

// تصفية النتائج
const result = fields.filter((item) => {
  return item.field1 == input;
});

// عرض النتيجة النهائية
if (result.length === 0) {
  demo.innerHTML = "غير موجود";
} else {
  demo.innerHTML = result.map((field) => {
    return (
      "<tr><td>" +
      field.field1 +
      ...
      "</td></tr>"
    );
  });
}

الميزة في هذا الحل هو عند تطابق نتيجة البحث مع أكثر من عنصر سيتم عرض كل تلك العناصر، يمكنك التطوير على عملية التطابق لاستخدام التعابير النظامية Regex، وبالتالي سيصبح البحث أقوى ويمكنه عرض النتائج اذا كان هناك ولو تطابق جزئي مع نص البحث

أواجه مشكلة في استخراج المعلومات المتطابقة عند استخدام else في جافا سكريبت

السؤال

Mohamed Refaat10

2 أجوبة على هذا السؤال

Recommended Posts

شرف الدين حفني

Hassan Hedr

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية