Develop Reference

Add option to select for each line echoed in PHP

I've checked out some of the other similar questions but they aren't doing exactly what I'm trying to do. I'm ajaxing a php page to echo the contents of a folder on my server. Right now, I have it listing the files line by line. I would simply like to take the value of each line and add it to a select box.
If I can just come up with a way in javascript to run a loop for each line found from this php page, I can add the option to the select myself. Any idea of how to accomplish this? Everything I find online is for a different scenario and I can't find anything that'll work. Thanks
Edit: This is the closest I've gotten
var files = msg.split(" ");
$.each(files, function(index, value) {
var x = document.getElementById("Emulators");
var option = document.createElement("option");
option.text = files;
x.add(option);
});
When I do that, this is the result
Any idea why it's the last drop down is looking like that? This is what the php page is outputting

The easiest way, seeing as you're already using JS/jQuery would be to use $.append() doc.
Either do this as part of your return or loop through the file. You shouldn't need to create the file if you add it to the .success(data) the function of the ajax call. Simply have the PHP file you're calling echo out what you need in a format you can interpret, eg json_encode your output array.
Edit adding suggestion:
THE FOLLOWING IS UNTESTED AND PURELY FOR EXAMPLE:
NB: this expects test.php to output the formatted data as an array parsed through json_encode.
$.ajax({
url: "test.php"
}).success(function(data) {
var files = JSON.parse(data);
$.each(files, function(index, value) {
$('#result-div').append( value );
});
});

Here is a way to iterate through the data using the array map function to call jQuery's append function.
const mySelect = $('#my-select');
const files = ['path/file1.ext', 'path/file2.ext'];
files.map(x => {
mySelect.append( $('<option value="' + x + '">' + x + '</option>') );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="my-select"></select>

Showing results from JSON only when filter is selected

Objective
I want display results only when it's respective state is selected. Currently all results are shown by default when the page loads.
I do not want anything to load by default. When a state is selected then those results should populate.
Background
I have a location selection feature that I am working on at this CodePen.
It used MustacheJS for templating
and is populated by data in a JSON file by this script
$(function() {
$.getJSON('https://s3-us-west-2.amazonaws.com/s.cdpn.io/161741/labs.js', function(data) {
var template = $('#labsListStates').html();
var html = Mustache.to_html(template, data);
$('#states').html(html);
});
});
The results can be filtered by state with. It runs on this script
/* Filter for locations */
$('#lab-state-select').on('change', function (e) {
e.preventDefault();
var cat = $(this).val();
var nam = $(this).val();
$('#states > div').hide();
$('#states > div[data-category-type="'+cat+'"][data-category-name="'+nam+'"]').show();
});
Problems
I know that this is sloppy. I am not using pure JSON but actually creating a Javascript object. And even named the file to end with .js so that it would work. I read about how that is a bad practice at http://www.kryptonite-dove.com/blog/load-json-file-locally-using-pure-javascript
That taught me to look into a XMLHttpRequest. But even implementing that I am still confused how to display the data I need when I need it. I think I am on the correct track by looking into the
.on() but would appreciate some additional help.

You simply use $('#states > div').hide(); to hide the data right after you load the data: $('#states').html(html);.
You can check out the fork here: http://codepen.io/anon/pen/lBims
As for getting the JSON file, you can simply return it with any file type. You don't have to use a .js extension if it's just pure JSON output. And JSON is just a stringified representation for Javascript objects, so it's fine treating JSON as an object. In Fact that's what you're supposed to do. JSON = JavaScript Object Notation.

How to get data from file in the same folder as a JS variable in a background page?

So my question is this: i have a box.html that contains some <div>s. It is way too big to be stored as a string in the background script. It would be very inconvenient to change anything in the html if it was stored as just a string variable.
What I can't figure out is how to access that file from background.js so that all of the html is then stored in a variable like var box = "some html"
So that when I have that variable I can then pass it on to a content script when I need it.
I know that chrome.extension.getURL('box.html'); gets the path to the file I need, but how do I load the file?
in Firefox this is simply done with: self.data.load('box.html'); in the main.js
so is there a similar call for google chrome?

I've used a simple ajax request through jQuery to solve this in the past:
var myDiv = document.queryElement('my_div');
$.get(chrome.extension.getURL('box.html'), function(data) {
myDiv.innerHTML = data;
});

Displaying data from a database using jQuery and Javascript

I'm trying to display specific parts of a Cloudant database. This database contains many separate documents, and each document contains a category called "results". I'm trying to display whatever is in results. Each document is identified by its own id. I tried using the get() method in jQuery, but unfortunately it is not running successfully.
function grabData(){
var url = 'https://cloudant.com/futon/document.html?acharya%2Ftoxtweet/ff558f75077e8c758523cd3bd8ffdf88';
$.get(url, function(data) {
$('.result').html(data);
alert("Data loaded: " + data);
});
}
grabData();
I'm not entirely sure where I went wrong...Should I consider using SQL instead of ajax?

I think your issue it this:
replace this:
grabData();
with this:
$(document).ready(function(){
grabData();
});
or more shortened:
$(function(){
grabData();
});

The URL you are using is returning an entire webpage.
Your jQuery code is looking for an element on the current page with a class name of result and trying to change it's inner HTML to the response from the URL.
You didn't provide any additional code to look at, but I would assume that is not what you were expecting it to do.
I assume you are wanting to parse through the entire url, but in your current code the page will be processed as a raw string and not a DOM object. So you would have to parse through that string with regular expressions, etc.

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

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

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>');
}