CODEWITHSUNDEEP
javascript
Adam Rousseau
Adam Rousseau

Reputation: 15

Only 1 result from JSON array

In my getValueByKey function, I want to output 5 different items and their attributes, but my for loop only seems to allow me to choose one at a time.

When I change to i = 4 it will go to the 5th item. I just want to output all instead of choosing just one.

Any help is appreciated. Thank you very much.

window.onload = function() {

var getJSON = function (url, successHandler, errorHandler) {
    var xhr = typeof XMLHttpRequest != 'undefined'
        ? new XMLHttpRequest()
        : new ActiveXObject('Microsoft.XMLHTTP');

    xhr.open('get', url, true);
    xhr.setRequestHeader("X-Algolia-Application-Id", apiApplicationId);
    xhr.setRequestHeader("X-Algolia-API-Key", apiKey);
    xhr.responseType = 'json';
    xhr.onreadystatechange = function () {
        var status;
        var data;
        if (xhr.readyState == 4) {
            status = xhr.status;
            if (status == 200) {
                successHandler && successHandler(xhr.response);
            } else {
                errorHandler && errorHandler(status);
            }
        }
    };
    xhr.send();
};

  var search = document.getElementById('search');

  search.addEventListener('keyup', function() {
    getJSON(apiEndpoint, function(data) {

      function getValueByKey(key, data) {
        var i, len = data.length;

        for (i = 0; i < len; i++) {
          if (data[i] && data[i].hasOwnProperty(key)) {
            return data[i][key];
          }
        }

        return -1;
      }

      document.getElementById('item-wrapper').innerHTML =
        '<div class="col-sm-4">' +
        '<img src="path/to-image.jpg">' +
        '</div>' +
        '<div class="col-sm-8">' +
        '<ul>' +
        '<li><strong>Bag Brand:</strong> <span id="search-results-brand"></span></li>' +
        '<li><strong>Bag ID:</strong> <span id="search-results-id"></span></li>' +
        '<li><strong>Bag Color:</strong> <span id="search-results-color"></span></li>' +
        '<li><strong>Bag Description:</strong> <span id="search-results-description"></span></li>' +
        '<li><strong>Bag Material:</strong> <span id="search-results-material"></span></li>' +
        '<li><strong>Bag Price:</strong> $<span id="search-results-price"></span></li>' +
        '</ul>' +
        '</div>';

      output_id = getValueByKey('id', data.hits);
      output_brand = getValueByKey('brand', data.hits);
      output_color = getValueByKey('color', data.hits);
      output_description = getValueByKey('description', data.hits);
      output_material = getValueByKey('material', data.hits);
      output_price = getValueByKey('price', data.hits);

      document.getElementById("search-results-brand").innerHTML = output_brand;
      document.getElementById("search-results-id").innerHTML = output_id;
      document.getElementById("search-results-color").innerHTML = output_color;
      document.getElementById("search-results-description").innerHTML = output_description;
      document.getElementById("search-results-material").innerHTML = output_material;
      document.getElementById("search-results-price").innerHTML = output_price;

    }, function(status) {
      alert('Something went wrong.');
    });
  });
};
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="css/common.css">
  <script type="application/ecmascript" src="js/common.js"></script>
</head>

<body>
  <header>
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <h1>Test</h1>
        </div>
      </div>
    </div>
  </header>
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <input placeholder="search bags" id="search">
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row item-row" id="item-wrapper"></div>
  </div>
</body>

</html>

Upvotes: 1

Views: 64

Answers (1)

Shanil Fernando
Shanil Fernando

Reputation: 1322

You are return data[i][key]; . Do not return untill loop finishes.

function getValueByKey(key, data) {
        var i, len = data.length;
        var result =[];

        for (i = 0; i < len; i++) {
          if (data[i] && data[i].hasOwnProperty(key)) {
            result.push(data[i][key]);
          }
        }

        return result;
      }

Edit for your question in the comment

As per my understanding your question, you can try something like this.I did not test this code. Let me know if there are any errors.

    var items;
for(var i=0; i<output_id.length; i++){
items +='<div class="col-sm-4">' +
            '<img src="path/to-image.jpg">' +
            '</div>' +
            '<div class="col-sm-8">' +
            '<ul>' +
            '<li><strong>Bag Brand:</strong>'+output_brand[i]+'<span id="search-results-brand"></span></li>' +
            '<li><strong>Bag ID:</strong>'+output_id[i]+' <span id="search-results-id"></span></li>' +
            '<li><strong>Bag Color:</strong>'+output_color[i]+' <span id="search-results-color"></span></li>' +
            '<li><strong>Bag Description:</strong>'+output_description[i]+' <span id="search-results-description"></span></li>' +
            '<li><strong>Bag Material:</strong>'+output_material[i]+' <span id="search-results-material"></span></li>' +
            '<li><strong>Bag Price:</strong> '+output_price[i]+'$<span id="search-results-price"></span></li>' +
            '</ul>' +
            '</div>';
}

document.getElementById('item-wrapper').innerHTML =items;

Upvotes: 2

Related Questions