Member Avatar for powerson65

Hi i am trying to perform a search on a json file called PCproducts.json which has in it various arrays with other data in it.I have seen various examples but seems that either i am doing something wrong in the code or calling the file in the wrong way.

This is my HTML form.

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Live Search</title>
    <!-- <link rel="stylesheet" href="mystyle.css" /> -->
</head>
<body>
<div id="searcharea">
    <label for="search">live search</label>
    <p>Enter the name of the speaker</p>
    <input type="search" name="search" id="search" placeholder="name" />
</div>
<div id="update"></div>
<script src="jquery.js"></script>
<script src="script3.js"></script>
</body>
</html>

This is my script.js file

$('#search').keyup(function() {
    var searchField = $('#search').val();
    var myExp = new RegExp(searchField, "i");
    $.get('PCproducts.json', function(data) {
        var output = '<ul class="searchresults">';

        $(data).find("name").each(function(index, value){
            var val = value.firstChild.nodeValue;
            if ((val.search(myExp) != -1)) {
                output += '<li>' + val + '</li>';
            }       
        });

        output += '</ul>';

        $('#update').html(output);
    }); //get 
});

While this is part of the PCproducts.json file so as to get an idea

{
"pc":
 [
    {
    "title":"Call of Duty - Ghosts",
    "category":"PC",
    "genre":"Action Multiplayer Game",
    "developed":"Ubisoft",
    "imgpath":"images/thumb/Call of Duty Ghosts(PC).jpg",
    "released": "November 2013",
    "price":"45.00 Eur",
    "quantity":4
    },
    {
    "title":"Assassins Creed IV - Black Flag",
    "category":"PC",
    "genre":"Action Adventure Game",
    "developed":" Ubisoft",
    "imgpath":"images/thumb/Assasins Creed Black Flag (PC).jpg",
    "released": "October 2013",
    "price":"45.00 Eur",
    "quantity":4
    },
  ],
  "Wii":
 [
    {
    "title":"Call of Duty - Black Ops",
    "category":"Wii",
    "genre": "Action Game",
    "developed":"Ubisoft",
    "imgpath":"images/thumb/Call of Duty Black Ops(Wii).jpg",
    "released": "November 2013",
    "price":"45.00 Eur",
    "quantity":4
    },
    {
    "title":"Fifa 14",
    "category":"Wii",
    "genre": "Football Game",
    "developed":" EA Sports",
    "imgpath":"images/thumb/Fifa 14(Wii).jpg",
    "released": "October 2013",
    "price":"45.00 Eur",
    "quantity":4
    },
 ],
 "3DS":
 [
    {
    "title":"Super Mario 3D Land",
    "category":"3DS",
    "genre": "Platform Game",
    "developed":"Nintendo",
    "imgpath":"images/thumb/Super Mario 3D Land(3DS).jpg",
    "released": "November 2011",
    "price":"35.00 Eur",
    "quantity":4
    },
    {
    "title":"Pokemon X",
    "category":"3DS",
    "genre": "Fantasy ,
    "developed":" Nintendo/Game Freak",
    "imgpath":"images/thumb/Pokemon X(3DS).jpg",
    "released": "October 2013",
    "price":"45.00 Eur",
    "quantity":4
    },

Can anyone maybe take a look at the above code and tell me what is wrong with the code or how to go around it, as i am really confused, as i manged to bring and display the above json file but got confused in the search function.

  • 2 Contributors
  • 1 Reply
  • 3K Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Member #881471

Dani AI

Generated

The main issue is that you are treating JSON like HTML/XML. $(data).find('name') traverses a DOM, but $.getJSON gives you plain JS objects. Also note your data uses title (not name). In addition to ’s missing quote, the sample shows trailing commas after the last items in arrays; those make the JSON invalid too. Fix the JSON first, then filter the arrays in JavaScript instead of querying with jQuery selectors.

Here is a simple pattern that fetches once, flattens the platform arrays, and does a debounced text match across title, genre, and developed:

$(function () {
  var cache = [];

  $.getJSON('PCproducts.json').done(function (data) {
    cache = []
      .concat(data.pc || [], data.Wii || [], data['3DS'] || []);
  });

  $('#search').on('input', debounce(function () {
    var q = this.value.trim().toLowerCase();
    if (!q) { $('#update').empty(); return; }

    var matches = cache.filter(function (item) {
      return [item.title, item.genre, item.developed]
        .filter(Boolean)
        .join(' ')
        .toLowerCase()
        .indexOf(q) !== -1;
    });

    var html = '<ul class="searchresults">' + matches.map(function (it) {
      return '<li>' + it.title + ' (' + it.category + ')</li>';
    }).join('') + '</ul>';

    $('#update').html(matches.length ? html : '<p>No matches.</p>');
  }, 150));

  function debounce(fn, delay) {
    var t; return function () {
      clearTimeout(t);
      var ctx = this, args = arguments;
      t = setTimeout(function () { fn.apply(ctx, args); }, delay);
    };
  }
});

Tips:

  • Serve the JSON over http(s) (not file://) to avoid browser security restrictions.
  • Cache the dataset (as above) rather than reloading on every keystroke.
  • Validate property names and casing; JSON keys are case-sensitive.
Member Avatar for Member #881471

Your JSON isn't correct. Line 63 is missing a quote at the end of Fantasy before the comma. You can also use jsonlint.com to validate your JSON data.

Edited by Member #881471 because: grammar
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.