Преобразование массива JSON в HTML-таблицу при замене раскрывающегося списка - PullRequest
Новая
       1

Преобразование массива JSON в HTML-таблицу при замене раскрывающегося списка

0 голосов
/ 11 февраля 2019

У меня есть выпадающий список, в котором пользователи будут выбирать, какую модель они хотят.Тогда у меня также есть массив JSON, который содержит модель и другое описание различных автомобилей.Как я могу отобразить соответствующую таблицу JSON в соответствии с выбранным значением в раскрывающемся списке?

Как например: пользователь выбрал модель Toyota, будет отображаться только модель автомобиля Toyota, представленная в JSON.

Я новичок в JavaScript. 

<!DOCTYPE html>
<html>

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <style>
    th,
    td {
      padding: 28px;
      font-weight: normal;
      text-align: center;
      border: 1px solid black;
    }
    
    th {
      font-weight: bold;
    }
  </style>

  <script>
    $(document).ready(function() {
      var json = [{
          "Model": "BMW",
          "Car_Model": "6-series Gran Turismo",
          "Year": "2018",
          "Color": "Orange",
          "Price": "$71,195"
        },
        {
          "Model": "BMW",
          "Car_Model": "i8",
          "Year": "2019",
          "Color": "Black",
          "Price": "$148,495"
        },
        {
          "Model": "BMW",
          "Car_Model": "M5",
          "Year": "2017",
          "Color": "Blue",
          "Price": "$103,595"
        },
        {
          "Model": "Toyota",
          "Car_Model": "Sedan",
          "Year": "2017",
          "Color": "White",
          "Price": "$102,510"
        },
        {
          "Model": "Toyota",
          "Car_Model": "Camry",
          "Year": "2015",
          "Color": "Red",
          "Price": "$122,810"
        },
        {
          "Model": "Toyota",
          "Car_Model": "Corolla",
          "Year": "2016",
          "Color": "Blue",
          "Price": "$152,870"
        },
        {
          "Model": "Toyota",
          "Car_Model": "Hilux",
          "Year": "2018",
          "Color": "Black",
          "Price": "$258,695"
        },
        {
          "Model": "Toyota",
          "Car_Model": "Vios",
          "Year": "2019",
          "Color": "Blue",
          "Price": "$198,615"
        },
        {
          "Model": "Hyundai",
          "Car_Model": "Elantra",
          "Year": "2017",
          "Color": "Black",
          "Price": "$152,590"
        },
        {
          "Model": "Hyundai",
          "Car_Model": "Tucson",
          "Year": "2018",
          "Color": "Red",
          "Price": "$132,690"
        },
        {
          "Model": "Honda",
          "Car_Model": "Civic",
          "Year": "2016",
          "Color": "Blue",
          "Price": "$171,395"
        },
        {
          "Model": "Honda",
          "Car_Model": "Accord",
          "Year": "2019",
          "Color": "Black",
          "Price": "$159,445"
        },
        {
          "Model": "Honda",
          "Car_Model": "CR-V",
          "Year": "2017",
          "Color": "White",
          "Price": "$193,675"
        }


      ];
      var tr;
      for (var i = 0; i < json.length; i++) {
        tr = $('<tr/>');
        tr.append("<td>" + json[i].Model + "</td>");
        tr.append("<td>" + json[i].Car_Model + "</td>");
        tr.append("<td>" + json[i].Year + "</td>");
        tr.append("<td>" + json[i].Color + "</td>");
        tr.append("<td>" + json[i].Price + "</td>");
        $('table').append(tr);
      }
    });
  </script>
</head>

<body>
  <form action="" method="POST">
    <table>
      <tr>
        <td><b>MODEL: </b></td>
        <td>
          <select id="MODEL" NAME="MODEL" size="1" required>
            <option value="" selected="selected">Select Model...</option>
            <option value="BMW"> BMW </option>
            <option value="TOYOTA"> Toyota </option>
            <option value="HYUNDAI"> Hyundai </option>
            <option value="HONDA"> Honda </option>
          </select>
        </td>
      </tr>
    </table>
    <HR />
    <table>
      <tr>
        <th>Model</th>
        <th>Car Model</th>
        <th>Year</th>
        <th>Color</th>
        <th>Price</th>

      </tr>
    </table>
  </form>
</body>
</html>

Ответы [ 3 ]

0 голосов
/ 11 февраля 2019

Ваш HTML не сбалансирован, как вы создали tr, но нет таблицы.Во-вторых, вы можете использовать фильтр массива, чтобы получить подходящую модель 

var json = [{
    "Model": "BMW",
    "Car_Model": "6-series Gran Turismo",
    "Year": "2018",
    "Color": "Orange",
    "Price": "$71,195"
  },
  {
    "Model": "BMW",
    "Car_Model": "i8",
    "Year": "2019",
    "Color": "Black",
    "Price": "$148,495"
  },
  {
    "Model": "BMW",
    "Car_Model": "M5",
    "Year": "2017",
    "Color": "Blue",
    "Price": "$103,595"
  },
  {
    "Model": "Toyota",
    "Car_Model": "Sedan",
    "Year": "2017",
    "Color": "White",
    "Price": "$102,510"
  },
  {
    "Model": "Toyota",
    "Car_Model": "Camry",
    "Year": "2015",
    "Color": "Red",
    "Price": "$122,810"
  },
  {
    "Model": "Toyota",
    "Car_Model": "Corolla",
    "Year": "2016",
    "Color": "Blue",
    "Price": "$152,870"
  },
  {
    "Model": "Toyota",
    "Car_Model": "Hilux",
    "Year": "2018",
    "Color": "Black",
    "Price": "$258,695"
  },
  {
    "Model": "Toyota",
    "Car_Model": "Vios",
    "Year": "2019",
    "Color": "Blue",
    "Price": "$198,615"
  },
  {
    "Model": "Hyundai",
    "Car_Model": "Elantra",
    "Year": "2017",
    "Color": "Black",
    "Price": "$152,590"
  },
  {
    "Model": "Hyundai",
    "Car_Model": "Tucson",
    "Year": "2018",
    "Color": "Red",
    "Price": "$132,690"
  },
  {
    "Model": "Honda",
    "Car_Model": "Civic",
    "Year": "2016",
    "Color": "Blue",
    "Price": "$171,395"
  },
  {
    "Model": "Honda",
    "Car_Model": "Accord",
    "Year": "2019",
    "Color": "Black",
    "Price": "$159,445"
  },
  {
    "Model": "Honda",
    "Car_Model": "CR-V",
    "Year": "2017",
    "Color": "White",
    "Price": "$193,675"
  }


];

function updateTable(carType) {
  let carComp = carType.trim().toLowerCase();
  carTable = '';
  json.filter(function(item) {
    return item.Model.toLowerCase() === carComp;
  }).forEach(function(item) {
    carTable += `<tr><td>${item.Model}</td>
                          <td>${item.Car_Model}</td>
                          <td>${item.Year}</td>
                          <td>${item.Color}</td>
                          <td>${item.Price}</td>
                          </tr>`

  })
  $('table#carType tbody').empty().append(carTable);
}
th,
td {
  padding: 28px;
  font-weight: normal;
  text-align: center;
  border: 1px solid black;
}

th {
  font-weight: bold;
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel=\ "stylesheet\" href=\ "https://fonts.googleapis.com/icon?family=Material+Icons\">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



<form action="" method="POST">
  <table>
    <tr>
      <td><b>MODEL: </b></td>
      <td>
        <select id="MODEL" NAME="MODEL" size="1" required onchange='updateTable(this.value)'>
          <option value="" selected="selected">Select Model...</option>
          <option value="BMW"> BMW </option>
          <option value="TOYOTA"> Toyota </option>
          <option value="HYUNDAI"> Hyundai </option>
          <option value="HONDA"> Honda </option>
        </select>
      </td>
    </tr>
  </table>
  <HR>
  <table id='carType'>
    <thead>
      <tr>
        <th>Model</th>
        <th>Car Model</th>
        <th>Year</th>
        <th>Color</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tbody>
  </table>
</form>
0 голосов
/ 11 февраля 2019

вы можете работать с JSON или show(), hide() строками 

$(document).ready(function() {

  $('#MODEL').on('change', function(e) {
    var currentValue = $("#MODEL").val().toLowerCase();
    $('tr td:first-child').each(function(index, el) {
      if (index == 0) return;
      var td = $(el);
      if (currentValue == 'all' || td.text().toLowerCase() == currentValue)
        td.parent('tr').show();
      else
        td.parent('tr').hide()
    })
  });
  
  var json = [{"Model":"BMW","Car_Model":"6-series Gran Turismo","Year":"2018","Color":"Orange","Price":"$71,195"},{"Model":"BMW","Car_Model":"i8","Year":"2019","Color":"Black","Price":"$148,495"},{"Model":"BMW","Car_Model":"M5","Year":"2017","Color":"Blue","Price":"$103,595"},{"Model":"Toyota","Car_Model":"Sedan","Year":"2017","Color":"White","Price":"$102,510"},{"Model":"Toyota","Car_Model":"Camry","Year":"2015","Color":"Red","Price":"$122,810"},{"Model":"Toyota","Car_Model":"Corolla","Year":"2016","Color":"Blue","Price":"$152,870"},{"Model":"Toyota","Car_Model":"Hilux","Year":"2018","Color":"Black","Price":"$258,695"},{"Model":"Toyota","Car_Model":"Vios","Year":"2019","Color":"Blue","Price":"$198,615"},{"Model":"Hyundai","Car_Model":"Elantra","Year":"2017","Color":"Black","Price":"$152,590"},{"Model":"Hyundai","Car_Model":"Tucson","Year":"2018","Color":"Red","Price":"$132,690"},{"Model":"Honda","Car_Model":"Civic","Year":"2016","Color":"Blue","Price":"$171,395"},{"Model":"Honda","Car_Model":"Accord","Year":"2019","Color":"Black","Price":"$159,445"},{"Model":"Honda","Car_Model":"CR-V","Year":"2017","Color":"White","Price":"$193,675"}];
  var tr;
  for (var i = 0; i < json.length; i++) {
    tr = $('<tr/>');
    tr.append("<td>" + json[i].Model + "</td>");
    tr.append("<td>" + json[i].Car_Model + "</td>");
    tr.append("<td>" + json[i].Year + "</td>");
    tr.append("<td>" + json[i].Color + "</td>");
    tr.append("<td>" + json[i].Price + "</td>");
    $('table').append(tr);
  }
});
th, td {
   padding: 28px;
   font-weight: normal;
   text-align: center;
   border: 1px solid black;
 }
th {
   font-weight: bold;
 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action="" method="POST">
  <table>
    <tr>
      <td><b>MODEL: </b></td>
      <td>
        <select id="MODEL" NAME="MODEL" size="1" required>
          <option value="" selected="selected">Select Model...</option>
          <option value="ALL"> ALL </option>
          <option value="BMW"> BMW </option>
          <option value="TOYOTA"> Toyota </option>
          <option value="HYUNDAI"> Hyundai </option>
          <option value="HONDA"> Honda </option>
        </select>
      </td>
    </tr>
  </table>
  <HR />
  <table>
    <tr>
      <th>Model</th>
      <th>Car Model</th>
      <th>Year</th>
      <th>Color</th>
      <th>Price</th>

    </tr>
  </table>
</form>
0 голосов
/ 11 февраля 2019

Вы можете использовать filter примерно так: 

$(document).ready(function() {
  var json = [{
      "Model": "BMW",
      "Car_Model": "6-series Gran Turismo",
      "Year": "2018",
      "Color": "Orange",
      "Price": "$71,195"
    },
    {
      "Model": "BMW",
      "Car_Model": "i8",
      "Year": "2019",
      "Color": "Black",
      "Price": "$148,495"
    },
    {
      "Model": "BMW",
      "Car_Model": "M5",
      "Year": "2017",
      "Color": "Blue",
      "Price": "$103,595"
    },
    {
      "Model": "Toyota",
      "Car_Model": "Sedan",
      "Year": "2017",
      "Color": "White",
      "Price": "$102,510"
    },
    {
      "Model": "Toyota",
      "Car_Model": "Camry",
      "Year": "2015",
      "Color": "Red",
      "Price": "$122,810"
    },
    {
      "Model": "Toyota",
      "Car_Model": "Corolla",
      "Year": "2016",
      "Color": "Blue",
      "Price": "$152,870"
    },
    {
      "Model": "Toyota",
      "Car_Model": "Hilux",
      "Year": "2018",
      "Color": "Black",
      "Price": "$258,695"
    },
    {
      "Model": "Toyota",
      "Car_Model": "Vios",
      "Year": "2019",
      "Color": "Blue",
      "Price": "$198,615"
    },
    {
      "Model": "Hyundai",
      "Car_Model": "Elantra",
      "Year": "2017",
      "Color": "Black",
      "Price": "$152,590"
    },
    {
      "Model": "Hyundai",
      "Car_Model": "Tucson",
      "Year": "2018",
      "Color": "Red",
      "Price": "$132,690"
    },
    {
      "Model": "Honda",
      "Car_Model": "Civic",
      "Year": "2016",
      "Color": "Blue",
      "Price": "$171,395"
    },
    {
      "Model": "Honda",
      "Car_Model": "Accord",
      "Year": "2019",
      "Color": "Black",
      "Price": "$159,445"
    },
    {
      "Model": "Honda",
      "Car_Model": "CR-V",
      "Year": "2017",
      "Color": "White",
      "Price": "$193,675"
    }
  ];

  $("#MODEL").on("change", () => {
      $("table").html(`<tr><th>Model</th><th>Car Model</th><th>Year</th><th>Color</th><th>Price</th></tr>`);
    var matchJSON = json.filter(e => e["Model"].toLowerCase() == $("#MODEL").val().toLowerCase()); matchJSON.forEach(obj => $("table").append(`<tr><td>${obj["Model"]}</td><td>${obj["Car_Model"]}</td><td>${obj["Year"]}</td><td>${obj["Color"]}</td><td>${obj["Price"]}</td></tr>`));
  });
});
th,
td {
  padding: 28px;
  font-weight: normal;
  text-align: center;
  border: 1px solid black;
}

th {
  font-weight: bold;
}
<!DOCTYPE html>
<html>

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <form action="" method="POST">
    <tr>
      <td><b>MODEL: </b></td>
      <td>
        <select id="MODEL" NAME="MODEL" size="1" required>
          <option value="" selected="selected">Select Model...</option>
          <option value="BMW"> BMW </option>
          <option value="TOYOTA"> Toyota </option>
          <option value="HYUNDAI"> Hyundai </option>
          <option value="HONDA"> Honda </option>
        </select>
      </td>
    </tr>
    <HR />
    <table>
      <tr>
        <th>Model</th>
        <th>Car Model</th>
        <th>Year</th>
        <th>Color</th>
        <th>Price</th>

      </tr>
    </table>
  </form>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...