We Keep Coding

Beginner stuck on jQuery/JS and would love some assistance

I'm trying to build a quiz app using JavaScript, jQuery, html, and CSS. I'm trying to get the questions and answer choices to load and am having trouble.
Can anyone help me with editing the "generateQuestion" function in my JS file: https://github.com/em-ilylewis/Quiz-App/blob/master/store.js.
Here is the html as well: https://github.com/em-ilylewis/Quiz-App/blob/master/question-page.html.

Going line by line in the comments above the generateQuestion function should help break it down:
1. get the object from the store at the questionNumber index
Since STORE is an array, you can access individual items in that array like so:
// This will get you the FIRST item in your STORE array.
STORE[0]
And since we already know that the questionNumber variable is set to 0 (on line 77) you can do this:
// This will get you the FIRST item in your STORE array.
STORE[questionNumber]
2. use jQuery to select the element with the class questionBox
// This is correctly targeting the questionBox element
$(".questionBox")
3. use the html function on the jQuery element from the previous step to fill that element with the question string from the object you got out of the store
- Now you can use object-dot notation to access an object's values using its key property, like so:
// This will get you the first item's "question" in your STORE's array (assuming it is still 0).
$(".questionBox").html(STORE[questionNumber].question);
Unfortunately, this only solves your problem for getting the first item in your STORE array. So you'll likely want to pass in the index of the STORE array by using arguments from your generateQuestion function, like so:
// "index" is an argument of generateQuestion.
function generateQuestion(index) {
$(".questionBox").html(STORE[index].question);
$(".answerChoiceBox").html(STORE[index].choices);
}
generateQuestion(0); // Passing in 0 as a parameter of generateQuestion will get you the FIRST question in your array.
generateQuestion(1); // ...SECOND question
generateQuestion(2); // ...THIRD question

Get object by HTML tag and remove from localstorage

this is my first question on stackoverflow.
and a little bit experience on code.
so I have a localstorage like this:
myDB: "[{"key:"123","label":"abc"}]
I have a div with "abc" as value:
<div id="name">abc</div>
And many id's div clone with different value
<div id="name">abc</div>
<div id="name">cde</div>
<div id="name">efg</div>
I want to read the value of the ID "name", make a if/else like looking "abc" are in the localstorage, if yes delete it with the key. else not delete.
I have thinking of using document.getElement to get value from ID and compare it to localstorage and using if else to do that thing. But there are many clone have that event to trigger the function to delete it. So the function don't know which ID's value to be compare and delete it.
I really awkward for this newbie question. But I have to ask, many thanks first :)
*New question:
I want to delete last element of the localstorage.
Can I convert localstorage to array then using array.pop(). Then convert the changed array again to the localstorage?

First, as was mentioned by others, id must be unique. You can use any other attribute instead, for example, class:
<div class="name">abc</div>
<div class="name">def</div>
<div class="name">ghi</div>
<div class="name">jkl</div>
<div class="other">mno</div>
Then, to query these elements, you could use document.getElementsByClassName("name") which will return you an array-like object. You can convert this object to an array of values using a combination of spread syntax and map method:
let values = [...document.getElementsByClassName("name")].map(e => e.innerHTML);
To work with the local storage you can use localStorage.setItem and localStorage.getItem. As you know, the local storage stores only strings, so JSON.parse and JSON.stringify methods will be helpful too.
Here is the example of code:
localStorage.setItem("myDB", '[{"key":"123","label":"abc"}, {"key":"456","label":"mno"}]');
console.log('Local storage before: ', localStorage.getItem("myDB"));
// extracting div values to an array
let values = [...document.getElementsByClassName("name")].map(e => e.innerHTML);
// creating a js object from myDB string
let db = JSON.parse(localStorage.getItem("myDB"));
// leaving only those elements, which labels are not in the values array
localStorage.setItem("myDB", JSON.stringify(db.filter(item => !values.includes(item.label))));
console.log('Local storage after: ', localStorage.getItem("myDB"));
JSFiddle link: https://jsfiddle.net/v03wpgq1/4/

id attributes should be unique on the page, otherwise only the last one on the page has the ability to be referenced easily (or at least, properly).
There should be a section that contains these which makes them easily queryable. Perhaps inside of an element with an id guaranteed to uniquely hold a set of name value pairs.
Using document.querySelectorAll is your best bet for finding these elements, and will be made easier by creating a structure that can be queried.
With a set of items to look for, it should be easy to iterate and test for values and keys inside of localStorage.

Return object bound to a dynamic element when label for object is also dynamic

I am using CKEditor. Within my page, the user can dynamically add/remove the element containing the WYSIWYG ckeditor text editor.
CKEDITOR.instances returns an object which contains within it all the ck_editor objects on my page.
When the user clicks the add button, then the following code successfully grabs that element:
CKEDITOR.instances[“my_textarea_0_body"]
The issue is when the user clicks delete to remove that element, and then reclicks add. I now want to grab that new ckeditor element on the page. However, now I need to grab it with this:
CKEDITOR.instances[“my_textarea_1_body"]
Notice that the number changed. So, the user is able to toggle the add/remove of this element any number of times. Example: if they did it 100 times I would need to have a way to grab that object like so:
CKEDITOR.instances[“my_textarea_100_body"]
The problem is that I never know what that number will be. That number is vital for me to create the string in order to grab the appropriate object.
Question: How can I grab this dynamically labeled object that is contained within the CKEDITOR.instances object? I know that my desired object will always be the LAST object appended within that CKEDITOR.instances object.

I assume that CKEDITOR.instancess a kind of a map (dictionary), so you can get all key names by Object.keys(). And then select the last/first/ or n-th instance name.
var mapping_length = Object.keys(CKEDITOR.instances).length;
var object_label = Object.keys(CKEDITOR.instances)[mapping_length - 1];
CKEDITOR.instances[object_label];
This will return the desired object from within that dictionary object.

Regex indeed is your friend here. /^CKEDITOR\.instances\["my_textarea_\d+_body"\]$/.test(str) should get the job done. (if you copy and paste any of your initial examples to test, it will fail however since you've got an angled quote illegal character in there)
console.log(/^CKEDITOR\.instances\["my_textarea_\d+_body"\]$/.test('CKEDITOR.instances["my_textarea_0_body"]'))
I think I understand what you're getting at though - you know the vague structure of the key, but not exactly what it will be when you're trying to retrieve it. In that case, you'd want to search through the keys of the CKEDITOR.instances object for any that match that pattern. So, let matchingKeys = Object.keys(CKEDITOR.instances).filter(key => /^my_textarea_\d+_body$/.test(key)). That will return a set of all keys that match that pattern.

You can create a helper function which checks for a regex match. The regex for that field should be:
my_textarea_\d+_body
Then you can modify/add the new object key to instances

Storing Selected Input value on an array and inserting on mongodb

So this is the problem
Actually i have this code, to insert a value from an Select
var valorTipoMenu = document.getElementById('tipoMenu').value;
First i take the value from the select which id is 'restaurant', and later i take the value and insert on mongo collection like this,
Menu.insert({tipoMenu:valorTipoMenu});
so this work fine, but just insert 1x1 menu at time, so this is what im wanna do, i want to insert more than 2 values on valorTipoMenu variable, i think this may work like selecting one item from the select list, storing on and array variable called idk manyMenus , and later inserting that value on the mongo collection, but how can take the value from the select and storing on some array and later taking that array and inserting on mongo collection?
thanks regards

There are a number of different ways you can do this, but if you just want an array:
var valorTipoMenuArray = [];
valorTipoMenuArray.push(document.getElementById('tipoMenu').value);
valorTipoMenuArray.push(document.getElementById([NEXT ELEMENT YOU WANT TO PUT IN ARRAY]).value);
... MORE ELEMENTS ...
Menu.insert({tipoMenu: valorTipoMenuArray});

How can i implement a for loop in parseJson?

I'm newbie at JavaScript, and i'm having some issues using parse Json.
I have one array in PHP, and i'm passing the values from the PHP to JavaScript.
The problem is that i inserted the values inside a While loop, and When i get multiple values:
Value 1
Value 2
I receive this:
[{"id":"1","value":"1","month":"2"}, {"id":"1","value":"2","month":"2"}]
And to print the values i have to do that:
alert(obj[0].name);
alert(obj[1].name);
And i want to print the values together
How can i use a for loop in this situation? I just need a simple example to implement on my code, thanks.

I think you can get the length of the array using obj.length and then iterate over them and put all the values in a single variable. and then print/alert.
var len= obj.length;
var str="";
for(i=0;i<=len;i++)
{
str+=obj[i].name+' ';
}
something in the line, tied to your requirements.
Hope it helps.