Is it possible to search a JSON Array using a variable as the criteria

Question

Is it possible to search a JSON Array using a variable as the criteria

I have a JSON Array that needs to be searched:

[
{
      "Device_ID":"1",
      "Image":"HTC-One-X.png",
      "Manufacturer":"HTC",
      "Model":"One X",
      "Region":"GSM",
      "Type":"Phone"
   },
   {
      "Device_ID":"2",
      "Image":"Motorola-Xoom.png",
      "Manufacturer":"Motorola",
      "Model":"Xoom",
      "Region":"CDMA",
      "Type":"Tablet"
   },
   {
      "Device_ID":"8",
      "Image":"null",
      "Manufacturer":"Motorola",
      "Model":"Xoom 2",
      "Region":"CDMA",
      "Type":"Tablet"
   }
]

Using the keyword: $_GET['keyword']; I need to be able to search the combined value of Manufacturer and Model, for example Motorola Xoom. Then, output the matching values to variables.

For instance, if the Keyword was HTC, it would output:

$DeviceID = 1 $Image = HTC-One-X.png $Manufacturer = HTC $Model = One X $Region = GSM $Type = Phone

If the keyword was Motorola, then all entries containing Motorola should be displayed.

The goal is to show live updates of JSON Array entries as the user types keywords, but run this on the user's computer to reduce server load.

Any suggestions on the best way to accomplish this?

javascript json

Answer 1

Answer №1

Managing a selection box with manufacturer values is quite simple:

Use the following HTML:

<select id="selectionBox">
  <option>...</option>
</select>
<div id="outPut">
  output goes in here
</div>

Incorporate the Javascript code:

var selectedValue = document.getElementById("selectionBox").value;
for(var i = 0; i < jsonObject.length; i++){
  if(jsonObject[i].Manufacturer === selectedValue){
    //assuming your object is an array, iterate through its keys
    for(var key in jsonObject[i]){
      document.getElementById("outPut").innerHTML += jsonObject[i][key] + "</br>";
    }
  }
}

This will display all object contents in the output div. The styling can be customized according to your preferences.

Answer 2

Managing a selection box with manufacturer values is quite simple:

Use the following HTML:

<select id="selectionBox">
  <option>...</option>
</select>
<div id="outPut">
  output goes in here
</div>

Incorporate the Javascript code:

var selectedValue = document.getElementById("selectionBox").value;
for(var i = 0; i < jsonObject.length; i++){
  if(jsonObject[i].Manufacturer === selectedValue){
    //assuming your object is an array, iterate through its keys
    for(var key in jsonObject[i]){
      document.getElementById("outPut").innerHTML += jsonObject[i][key] + "</br>";
    }
  }
}

This will display all object contents in the output div. The styling can be customized according to your preferences.

Answer 3

Answer №2

Implement this function to filter JSON data as needed, the presentation is open-ended.

var gadgets = <your JSON array>;    

function screening(desiredTerm, info) {
    var refinedList = [], x, y;
    for (x = 0, y = info.length; x < y; x++) {
        if ((info[x].Brand && info[x].Brand.indexOf(desiredTerm) !== -1) || (info[x].Model && info[x].Model.indexOf(desiredTerm) !== -1)) {
            refinedList.push(info[x]);
        }
    }
    return refinedList;
}

// Sample implementation
var MotorolaDevices = screening('Motorola', gadgets);

Answer 4

Implement this function to filter JSON data as needed, the presentation is open-ended.

var gadgets = <your JSON array>;    

function screening(desiredTerm, info) {
    var refinedList = [], x, y;
    for (x = 0, y = info.length; x < y; x++) {
        if ((info[x].Brand && info[x].Brand.indexOf(desiredTerm) !== -1) || (info[x].Model && info[x].Model.indexOf(desiredTerm) !== -1)) {
            refinedList.push(info[x]);
        }
    }
    return refinedList;
}

// Sample implementation
var MotorolaDevices = screening('Motorola', gadgets);

Is it possible to search a JSON Array using a variable as the criteria

Answer №1

Answer №2

Similar questions

Unable to generate a JsonObject because of a java.lang.IllegalStateException error indicating that it is not a JSON Object

jQuery unable to access data from cross-origin JSON service URL

What is the process for enabling multiple consumers to subscribe to a shared topic in RabbitMQ and receive identical messages?

Issues encountered with Nextjs 13.4 and Next-Auth 4.2 regarding the signIn("credentials", { }); functionality not functioning as expected

I encounter Error 406 and CORS issues when making API calls

Making a REST call with values containing an apostrophe

How to Display a Modal Window Automatically Using Bootstrap.js?

Error: The function setEmail is not defined. (In 'setEmail(input)', 'setEmail' is not recognized) (Cannot utilize hooks with context API)

Automatically activate the next tab in Bootstrap

What is the process for retrieving User Information using AngularJS following NodeJS authentication?

Jquery is not displaying the background color of the progress bar

Tips for presenting a JSON object within a scrollView

JavaScript maintain a variable that holds onto nodes even after they have been removed

Creating an array of logos in ReactJS with the help of TailwindCSS

Identifying the Click Event Within an ngx Bootstrap Modal

Is there a simple method for transforming tabular data from an Excel spreadsheet into JSON format?

Transferring Android Json object and Json array through an httppost request

Mapping an array element to a string using Codable object

Each time the page is reloaded, an error message pops up: "TypeError: Cannot access attributes of an undefined object (referencing 'name')."

Obtain a custom token after next authentication through Google login