Получить внутренний текст из объединенного массива JSON onclick, используя javascript - PullRequest
Новая
       4

Получить внутренний текст из объединенного массива JSON onclick, используя javascript

0 голосов
/ 17 июня 2020

Я новичок ie пытаюсь создать приложение для корзины покупок. Я нашел в Интернете очень хорошую демонстрацию и пытаюсь настроить ее, чтобы использовать в своих целях. Приложение включает в себя и автозаполнение ввода, который извлекает все элементы json внутри файла. json. Эта часть отлично работает. Однако после получения json он объединяется на основе критериев поиска. Опять же, это желательно. Однако дальше я хочу, чтобы пользователь щелкнул один из продуктов в списке, и этот продукт был добавлен в таблицу html. Может ли кто-нибудь порекомендовать, как мне это сделать? 

const search = document.getElementById('search');
const matchList = document.getElementById('match-list');
//let states;

// Get products
const getPricelist = async() => {
  const res = await fetch('pricelist.json');
  pricelist = await res.json();
};

// Filter products
const searchPricelist = (searchText) => {
  // Get matches to current text input
  let matches = pricelist.filter((pricelist) => {
    const regex = new RegExp(`^${searchText}`, 'gi');
    return (
      pricelist.product.match(regex) ||
      pricelist.product_category.match(regex) ||
      pricelist.product_class.match(regex) ||
      pricelist.partnumber.match(regex) ||
      pricelist.product_abbr.match(regex) ||
      pricelist.product_type.match(regex)
    );
  });

  // Clear when input or matches are empty
  if (searchText.length === 0) {
    matches = [];
    matchList.innerHTML = '';
  }

  outputHtml(matches);
};
// Show results in HTML
const outputHtml = (matches) => {
  if (matches.length > 0) {
    const html = matches

      .map(
        (match) =>
        `<div id="test" onclick="myFunction()" class="product-card card card-body mb-1"><h4>${match.product}
                    <br><strong> ${match.product_category} (${match.product_class})</strong></h4>
                    <small>Part Number: <strong>${match.partnumber}</strong>
                    <br>List Price: <strong>${match.list}</strong></small>
                    <small>Description: <strong>${match.description}</strong></small>
                    </div>`)
      .join('');
    matchList.innerHTML = html;
  }
};


window.addEventListener('DOMContentLoaded', getPricelist);
search.addEventListener('input', () => searchPricelist(search.value));

function myFunction(event) {
  window.onclick = (e) => {
    console.log(e.target.innerText);
  }

  search.value = "";
  matches = [];
  matchList.innerHTML = '';
};
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css" />

  <title>Autocomplete</title>
</head>

<body>
  <div class="container mt-5">
    <div class="row">
      <div class="col-md-6 m-auto">
        <h3 class="text-center mb-3">
          Autocomplete
        </h3>

        <div class="form-group">
          <input type="text" id="search" class="form-control form-control-lg" placeholder="Enter Product Name or Abbreviation" />
        </div>

        <div id="match-list"></div>

        <br />
        <h3 class="text-center mb-3">
          Shopping Cart
        </h3>
        <div>
          <table class="table table-striped mt-5">
            <thead>
              <tr>
                <th>Part Number</th>
                <th>List Price</th>
                <th>Product</th>
                <th>Product Category</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody id="shopping-cart"></tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <script src="main.js"></script>
</body>

</html>
                [
                {
                    "partnumber": "1",
                    "list": "$100.00 ",
                    "product": "Ford",
                    "product_type": "Mustang",
                    "product_category": "Sports Car",
                    "product_class": "GTE",
                    "product_abbr": "Mustang",
                    "description": "Ford Mustang GTE Sports Car"
                },
                {
                    "partnumber": "2",
                    "list": "$200.00 ",
                    "product": "Ford",
                    "product_type": "Bronco",
                    "product_category": "SUV",
                    "product_class": "Truck",
                    "product_abbr": "Bronco",
                    "description": "Ford Bronco SUV Truck"
                },
            ]

1 Ответ

0 голосов
/ 17 июня 2020

Часть js должна выглядеть следующим образом, протестирована и подтверждена, что работает. 

const search = document.getElementById('search');
const matchList = document.getElementById('match-list');
//let states;

// Get products
const getPricelist = async() => {
  const res = await fetch('pricelist.json');
  pricelist = await res.json();
};

// Filter products
const searchPricelist = (searchText) => {
  // Get matches to current text input
  let matches = pricelist.filter((pricelist) => {
    const regex = new RegExp(`^${searchText}`, 'gi');
    return (
      pricelist.product.match(regex) ||
      pricelist.product_category.match(regex) ||
      pricelist.product_class.match(regex) ||
      pricelist.partnumber.match(regex) ||
      pricelist.product_abbr.match(regex) ||
      pricelist.product_type.match(regex)
    );
  });

  // Clear when input or matches are empty
  if (searchText.length === 0) {
    matches = [];
    matchList.innerHTML = '';
  }

  outputHtml(matches);
};
// Show results in HTML
const outputHtml = (matches) => {
  if (matches.length > 0) {
    const html = matches

      .map(
        (match) =>
        `<div id="${match.partnumber}" class="product-card card card-body mb-1"><h4>${match.product}
                    <br><strong> ${match.product_category} (${match.product_class})</strong></h4>
                    <small>Part Number: <strong>${match.partnumber}</strong>
                    <br>List Price: <strong>${match.list}</strong></small>
                    <small>Description: <strong>${match.description}</strong></small>
                    </div>`
                    )
      .join('');
    matchList.innerHTML = html;
    $('.product-card').click(myFunction)
  }
};


window.addEventListener('DOMContentLoaded', getPricelist);
search.addEventListener('input', () => searchPricelist(search.value));

function myFunction() {

  const id = $(this).attr('id')
  const product = pricelist.filter(prod => prod.partnumber === id)[0]
  if(product){
    $('.table').append(`
        <tr>
          <th>${product.partnumber}</th>
          <th>${product.list}</th>
          <th>${product.product}</th>
          <th>${product.product_category}</th>
          <th>${product.description}</th>
        </tr>
    `)
  }
  search.value = "";
  matches = [];
  matchList.innerHTML = '';

};
...