Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Unsubscribed User
Unsubscribed User
30 Points

Trying to build a javascript search app

So I'm trying to build this search app with javascript. The app will allow search queries for items, categories and description. I've been able to pull some of the data with an ajax request but its not very dynamic. I need a way to loop through all the items in the arrays and tie the functionality to the search. At the moment my $.each loop isn't doing anything at the moment. Not sure how to go about pulling this all together. Any help greatly appreciated!

function foodQuery(){

var foodURL = "http://api.example.com/items?key=123456789";

$.ajax({
    url: foodURL,
    type: 'GET',
    contentType: "text/plain",
    dataType: 'json',
    success: function(json) {
       console.log(json);


        $.each(json, function(key, item) {
          //get product name
           $('.product_headline').html(json.products[2].productName);
           // get product id
           $('.item_id').html(json.products[2].itemCode);
          // get img data
           var src = ' <img class="item_img" src="http://api.example.com/assets/images/' + json.products[2].itemCode + '@2x.jpg" />';

           $(src).prependTo('.imgwrap');
       });

    },
    error: function(e) {
       console.log(e.message);
    }
});

}

$(document).ready(function() {
    foodQuery();

});

the json data looks like this 

{
    products: [
        {
        itemCode: "12345",
        productName: "Vermont Cheddar All Natural Cheese"
        },
        {
        itemCode: "12346",
        productName: "All Natural Uncured Hams"
        },
        {
        itemCode: "12347",
        productName: "All Natural Roasted Turkeys"
        },
        {
        itemCode: "12348",
        productName: "Gold Label Switzerland Swiss All Natural Cheese "
        },
        {
        itemCode: "12349",
        productName: "French Brie 60% Double Creme All Natural Cheese"
        },
        {
        itemCode: "12340",
        productName: "Chevre"
        },
        {
        itemCode: "12341",
        productName: "Naturally Smoked Bacon - Product of Canada"
        },
        {
        itemCode: "12342",
        productName: "Bold Jerk Turkey Breast"
        }
    ]
}

this

   {
itemCode: "12345",
productName: "Vermont Cheddar All Natural Cheese",
price: "6.59",
soldBy: "pound",
isNatural: true,
category: "Alpine Cheese",
description: "Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur."
    }

and this 

{
categories: [
    "Bacon",
    "Soft Cheese",
    "Alpine Cheese",
    "Turkey",
    "Ham",
    "All Natural"
]
 }

1 Answer

Jonathan Johnson
.a{fill-rule:evenodd;}techdegree
Jonathan Johnson
Full Stack JavaScript Techdegree Student 952 Points

Hi Joey,

From the looks of your code and examples, you actually want to loop over the json.products array, not json itself.

Try something like this.

$.each(json.products, function(index, product) {
  //get product name
  $('.product_headline').html(product.productName);
  // ...
});
Unsubscribed User
Unsubscribed User
30 Points

awesome! that helped a ton. 

  $.each(json.products, function(index, product) { 

    // build product block
    var htmlString = '<div class="product large-3 columns">';
    //open imgwrap
    htmlString += '<div class="imgwrap">';
    //get img src
    htmlString += ' <img class="item_img" src="http://api.example.com/assets/images/' + product.itemCode + '@2x.jpg" />';
    // close imgwrap
    htmlString += '</div>';
    // open textwrap
    htmlString += '<div class="textwrap">';
    // get productName
    htmlString += '<h1 class="product_headline">' + product.productName + '</h1>' ;
    // get itemCode
    htmlString += '<h4 class="item_id" >' + product.itemCode + '</h4>';
    // get description
    // get price
    // close divs
    htmlString += '</div></div>';

    //console.log(htmlString);

}); //end each
Unsubscribed User
Unsubscribed User
30 Points

what's the best way to print my htmlString ? I have printHtml() but does it go after the ajax request?

  function printHtml() {
document.write(htmlString);
    }
Jonathan Johnson
.a{fill-rule:evenodd;}techdegree
Jonathan Johnson
Full Stack JavaScript Techdegree Student 952 Points

It really depends on what you're trying to accomplish when you say print. If you're attempting to add it to the page in a specific place, I would use jQuery's .append() and .prepend(). Generally I would avoid using document.write.

Unsubscribed User
Unsubscribed User
30 Points

thanks, .append() did end up working for me. But I'm really not sure how to make this a search function...

Jonathan Johnson
.a{fill-rule:evenodd;}techdegree
Jonathan Johnson
Full Stack JavaScript Techdegree Student 952 Points

Sure, now that you've got this piece working, you might ask new question outlining specifically what you're trying to accomplish with your now working code. :+1: