Render data from JSON file as HTML if input field requests certain data

Question

Is is possible to take data from a .json file and render it with HTML/JavaScript if for example a person types "example1" in a input field and be able to render the data related to "example1" onto that page ?

I'm pretty sure this can be accomplished, becuase I have seen the same if an input field requests data from an XML file and renders the data onto that page using JavaScript.

Here is my data inside a JavaScript file, but certainly be put into a .json file if needed to.

 var JSONObject = {

"id":"1",
"user" :"admin",
"pass":"admin",
"api":"000014556452446455455685454645"};

document.getElementById("jid").innerHTML=JSONObject.id
document.getElementById("juser").innerHTML=JSONObject.user
document.getElementById("jpass").innerHTML=JSONObject.pass
document.getElementById("japi").innerHTML=JSONObject.api
document.getElementById("jtest").innerHTML=JSONObject.test

what do you mean by request data? do you mean a remote request to a file that returs json formated data? can you be more specific? — albanx
– albanx, Commented Oct 16, 2011 at 1:57
I mean a json file that can return data to the html file. For instance, I type example into the text box on the html page. I think javascript can then take the input request and return data from the json file. All I need is a way to return data from a json file when someone requests from a text input field. Kind of like a search box, but instead returns one item from the json file. — user893246
– user893246, Commented Oct 16, 2011 at 2:31

Community · Accepted Answer · 2017-05-23 12:15:47Z

0

yes - use jQuery. Just look at the examples given here:

http://api.jquery.com/jQuery.getJSON/

or here: getjson jquery parsing an array

in the latter, the data is shown on page with this:

$.getJSON(url,
    function(data){
      $.each(data.items, function(i,item){
      $('#testfield').html('<p>' + item.d.title + '</p>');
      });
    });

I assume the user input should only display part of the data. You can then either send along some look up data and have functionality to return only relevant, or you can loop through data and show relevant.... like(in the loop):

if(item.d.title=myVar){      
  $('#testfield').html('<p>' + item.d.title + '</p>');
}

edited May 23, 2017 at 12:15

CommunityBot

11 silver badge

answered Oct 17, 2011 at 18:53

Steen

2,8972 gold badges24 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Render data from JSON file as HTML if input field requests certain data

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related