How to create an array with <input>? - javascript

I want to create an array with a html element. My main problem is, that i just get a string inside an array but no array.
Example: input is: 1,5,7,3,4
inside an array it look like this: ["1,5,7,3,4"] but i want it like this: [1,5,7,3,4]
I look for a solution made in javascript or better in jquery!

split will convert a string to an array.
var myArray = document.getElementById('myInput').value.split(',');

Use the split function to convert the string to an array.
For example:
<input type="text" id="myInput">1,5,7,3,4</input>
var myInput = $('#myInput').val();
var arr = myInput.split(','); // [1,5,7,3,4]

Related

Array to Newline String to Array again through HTML

I have an array that comes in from from my API that I would like to arrange in a way that is better for the user (namely, in a column as opposed to the typical comma separated printed array).
This is my JS Fiddle to give a clearer picture: https://jsfiddle.net/2z89owas/
My question is, how can I get output3 to display just like output (and maintain its status as an iterable array like it was as dates)?
First you should not be using value for an html element. You can use .value for extracting value from inputs. Change your line to:
var val = document.getElementById('output2').innerHTML;
Afterwards, you have to split the same way you did join.
var dates3 = val.split('<br>');
document.getElementById('output3').innerHTML = dates3;
You can directly use join, something like:
document.getElementById('output3').innerHTML = dates.join(',');
You can try mapping over the contents of dates instead, as so:
let datesElem = dates.map(date =>`<p>${date}</p>`);
// test: console.log(datesElem)
document.getElementById('output3').innerHTML = datesElem

Cycling through different values for the same variable name in Mustache.js?

I have some data that is like the following:
hello this is {{replacement_data}} and this {{replacement_data}} is {{replacement_data}}.
I want to use Mustache to replace these with an array of values:
[val1, val2, val3.
Is this type of thing possible? Currently, I'm writing an ugly loop in Java and looking to clean it up with something like this.
If this is as simple as it gets, you don't need handlebars or mustache. it is very simple to do with RegEx and a couple lines of code. See the example below. Given an array of replacements, in the same order as the content to be replaced, search for each and replace with corresponding array element.
Simple.
var replacements = ['first replacement', 'second replacement', 'third replacment'];
let subject = document.querySelector('div');
let input = subject.textContent;
let output = input.replace(/{{replace me}}/g, match=>replacements.shift());
subject.textContent = output;
<h3>Replacements below...</h3>
<div>
This is some string with {{replace me}} and {{replace me}} and {{replace me}}!
</div>

Fetch array value - JQuery

Consider that i have the following html
<input type="text" id="other_floor_plans" name="other_floor_plans[]" value="["Pool","Office","Sprinkler","Boiler"]">
To fetch the values i use
a = $('#other_floor_plans').val()
It returns the following
"["Pool","Office","Sprinkler","Boiler"]"
If i use a[0], it returns "[" as output. I need to get "Pool" as the first value.
How to accomplish this?
Your value is a type of string which has a correct JSON syntax. Just parse with JSON.parse into the array and use your syntax.
const value = '["Pool","Office","Sprinkler","Boiler"]';
const array = JSON.parse(value);
console.log(array[0]);
I think you need to change little bit of your code specially in markup.
changed your input markup into this <input type="text" id="other_floor_plans" name="other_floor_plans[]" value='["Pool","Office","Sprinkler","Boiler"]'>
then get value by jQuery
var a = $('#other_floor_plans').val(),
a = JSON.parse(a);
console.log(a[0]);
you need to use JSON.parse because you get json formate value and need to be parsed.
for my recommendation you just comma separate value like
<input type="text" id="other_floor_plans" name="other_floor_plans[]" value="Pool, Office, Sprinkler, Boiler">
then get first value by jQuery
var a = $('#other_floor_plans').val().split(",");
console.log(a[0]);
This one is much more readable and easy I guess.
You can use eval function to convert string to array and get the value.
var a = "['Pool','Office','Sprinkler','Boiler']"; // or you can also assign like this var a ='["Pool","Office","Sprinkler","Boiler"]'
var firstItem = eval(a)[0];
console.log(firstItem); //output will be "Pool"
There you doing a wrong practice when you initialize value in input box you must contain a value in different quotation symbols.
there you take " for value assign and " also for array string, that truncate your string on the second " that's why this return only [ in your value.
Try to use like this:
HTML
<input type="text" id="other_floor_plans" name="other_floor_plans[]" value='["Pool","Office","Sprinkler","Boiler"]'>
JQuery
var a = $('#other_floor_plans').val();
a = JSON.parse(a);
console.log(a);

Javascript String to Object/Array

I have a javascript string which looks like this:
['Chris','Johannes','test','lag#a.deaaas','lag#a.deaaa','lag#a.eaaa','lag#a.ea']
I want to pass this to a php document as an array/object. What is the easiest (jQuery?) way to do this?
Edit: I grab this string from the DOM:
<div class="container" data-users="['Chris','Johannes','test','lag#a.deaaas','lag#a.deaaa','lag#a.eaaa','lag#a.ea']" data-userids="[1,2,3,12,13,15,16]">
First, convert the data-users and data-userids into JSON (see http://www.php.net/manual/en/function.json-encode.php). That means the all quotes must be double quotes ("").
<div class="container" data-users='["Chris","Johannes","test","lag#a.deaaas","lag#a.deaaa","lag#a.eaaa","lag#a.ea"]' data-userids='[1,2,3,12,13,15,16]'>
Then you can get the data like this:
var dataUsers = JSON.parse($('div.container').attr('data-users'))
// dataUsers[0], dataUsers[1], dataUsers.length ....
var dataUserIds = JSON.parse($('div.container').attr('data-userids'))
Use the jQuery data() function, which will automatically cast values to the correct javascript datatype, including arrays and objects:
var container = $('.container');
var users = container.data('users');
var userIds = container.data('userids');

how can i get the values separated by a comma to a array? using java script

i have this static code that will hide/show some combo box but what if i add more category´s ?well if do add more category´s i have to change the code every time
so what i want to do is have a var that will receive several values separated by comma
and them some how it will separate the values and them it will store the values in a array. and now when the user needs to add more category´s i don't have to edit the code.
but how can i separate the values divided by a comma and then add them to a array?
If I understand your question correctly you'll want to have a look at http://www.w3schools.com/jsref/jsref_split.asp
And use var arr = YOURVARIABLE.split(',');
You can use the String.split() function, e.g:
var s = '1,2,3,4,5,6';
var values = s.split(',');
console.log(values);
For more information see here: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/split
You would use the split() method. http://www.w3schools.com/jsref/jsref_split.asp
var string = '1,2,3,text,123';
var array = string.split(',');
//array = [1, 2, 3, 'text', 123];
Try the following code
var testString = "comma,seperated,list";
var stringArr = testString.split(",");
the split() method will literally split the string by the delimeter passed to it and return an array of values. in this case our array will be
// stringArr = ["comma", "seperated", "list"];

Categories