We Keep Coding

How to combine data from an array and object and put together into an array in JavaScript?

I have an array in which I have some string value holding the id along with answer selected and I have different object in which I have the detail about answer which is selected. The below array keep updated whenever we select an option from question.
arr = ["Q1A1", "Q2A3"]
assume Q1 is Question no. 1 and A1 is option selected from the question. And below I have an object for the corresponding Q1 which contained the detail about answers and this object also get change as we move over to Q2
{
id: "Q1",
answers: [
{
id: "Q1A1",
text: "Yes"
},
{
id: "Q1A2",
text: "No"
}
]
}
same way I have any another object for Q2 if we select the answer in Q1, now we have different object for Q2
{
id: "Q2",
answers: [
{
id: "Q2A1",
text: "Test 1"
},
{
id: "Q2A2",
text: "Test 2"
},
{
id: "Q2A3",
text: "Test 3"
},
{
id: "Q2A4",
text: "Test 4"
}
]
}
I need to lookup the object with the help of array which contain question and answer(eg, "Q1A1") with selected and need to find the text for answer selected i.e ("Yes") if u look into the above object for question 1. Hence I need put into the array like this way.
result = ["Q1_Yes","Q2_Test3"]

This code will help you to get those results.
let selected = ["Q1A1", "Q2A3"];
let QA = [
{
id: "Q1",
answers: [
{
id: "Q1A1",
text: "Yes"
},
{
id: "Q1A2",
text: "No"
}
]
},
{
id: "Q2",
answers: [
{
id: "Q2A1",
text: "Test 1"
},
{
id: "Q2A2",
text: "Test 2"
},
{
id: "Q2A3",
text: "Test 3"
},
{
id: "Q2A4",
text: "Test 4"
}
]
}
];
let all_answers = QA.reduce((allanswers,qa)=>(qa.answers.map(d=> allanswers[d.id]=[qa.id,d.text]),allanswers),{});
const result = selected.map(selected => all_answers[selected].join('_'))
console.log(result)

Drop Menu in React using filters

I wanted to ask if there is any way to make a dropdown menu in react using .map() and .filter(),
like for instance let's say that i have this file :
Data.js
export const NavigationMenu = [
{
id: 1,
title: "header item 1",
},
{
id: 2,
title: "header item 2",
}
];
export const NavigationDropMenu = [
{
id: 1,
title: "drop item 1",
parent: "header item 1",
},
{
id: 2,
title: "drop item 1",
parent: "header item 2",
}
];
what i want to do is to first map the items from the first list like this
<li className="header__menu__item">
{item.title}
</li>
))}
and inside of that i want to make another map for the dropmenu, which will fetch items from the second list but to use filter to show only elements that contain that element as a trait.
so to make it simpler, I want to know if it is possible to make a dropdown menu using .map() and .filter().
thank you.

Get dinamically table header and dinamically add rows

I need to create a table with dynamically adding rows.
But I need to have a fixed table header that I got dynamically from JSON and table body also generated dynamically.
Here is JSON example
data = [
{
id: 0,
title: "control0",
text: "text 0"
},
{
id: 1,
title: "control1",
text: "text 1"
},
{
id: 2,
title: "control2",
text: "text 2"
},
{
id: 3,
title: "control3",
text: "text 3"
}
]
I try to create method, but I get new column instead of ROW
addRow(index, name) {
this.newDynamic = { id: index, name: name, text: "name" + index };
this.data.push(this.newDynamic);
return true;
}
Here is how now it is looking
But I need like this
When we click on button ADD ROW, I want to add new row but without title (like on picture), but update JSON with new object.
Here is stackblitz for example

Dynamically create tree/nested JSON in JS

I'm planning to use Bootstrap Treeview where the Json is expected as below.
I need to dynamically add element to the "tree" based on respective input nodes
var tree = {};
tree = [
{
text: "Parent 1",
nodes: [
{
text: "Child 1",
nodes: [
{
text: "Grandchild 1",
nodes : [
{
text : "GrandChild 3"
}
]
},
{
text: "Grandchild 2",
nodes : [
{
text : "GrandChild 4"
}
]
}
]
},
{
text: "Child 2"
}
]
},
{
text: "Parent 2"
},
{
text: "Parent 3"
},
{
text: "Parent 4"
},
{
text: "Parent 5"
}
];
I've tried array.reduce() but couldn't make that work.
Looking for some approach

Manually, you could do this:
alert(tree[0].nodes[0].nodes[0].nodes[0].text);// alerts "GrandChild 3"
// add a node array:
tree[0].nodes[0].nodes[0].nodes[0].nodes = [{
text: "GrandChild NEW First"
}];
console.dir(tree);
Shows:
Array[5]0: Object nodes: Array[2]0: Object nodes: Array[2]0: Object nodes: Array[1]0: Object nodes: Array[1]0: Object text: "GrandChild NEW First" _proto__: Object length: 1__proto__: Array[0]text: "GrandChild 3" _proto__: Object length: 1
Do same to array 1:
Array[5]
1: Object
nodes : Array[1]
text : "Parent 2"
tree[1].nodes = [{
text: "GrandChild NEW Second"
}];
Now you just need code to determine the depth of nodes and what to add (node or text or both) at that point.
EDIT If it makes it clearer, the last addition can also be done thus:
Add a new node array, then push a value into that
tree[1].nodes = [];
tree[1].nodes.push({
text: "GrandChild NEW Second"
});

Edit 2 Link to Plunkr
Because of the nature of the snippet editor, the code below will not work on the snippet editor, but in order to ensure that the code does not magically vanish from plunkr, I've included it below. All you need to do is include jquery, bootstrap's css file, the treeview css, and treeview js file.
Some Issues
This may just be because I have never used treeview before in my life, but if you have opened up anything on the treeview or selected something, by adding in the new element you erase any of that action. Going through it quickly I didn't see a way to simply rebuild the node list (our tree variable) from the current states. I attempted to pass a pre-defined nodeId to see if we could make the changes directly onto the parent tree variable by using the get[State] commands but the id seems to be generated by the rendering aspect and is not carried over. (to clarify: I gave parent 1 a node id of 1, but when I called a couple of calls on it, I got that it's node id was 0)
The id convention seems to start at the first element (nodeId=0). It first then goes through the children (if any) of that node, incrementing the nodeId as it goes. Theoretically it would be a simple enough script to go back and enumerate the nodeId's manually so that you can make state changes so that the re-render looks the same as before, minus a newly appended node somewhere.
var tree = [{
text: "Parent 1",
nodes: [{
text: "Child 1",
nodes: [{
text: "Grandchild 1",
nodes: [{
text: "GrandChild 3"
}]
}, {
text: "Grandchild 2",
nodes: [{
text: "GrandChild 4"
}]
}]
}, {
text: "Child 2"
}]
}, {
text: "Parent 2"
}, {
text: "Parent 3"
}, {
text: "Parent 4"
}, {
text: "Parent 5"
}];
$(document).ready(function() {
$('#test').treeview({
data: tree
});
$('button.btn-primary').on('click', function() {
tree.push({
text: 'Parent ' + (tree.length + 1)
});
$('#test').treeview({
data: tree
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" />
<button class="btn btn-primary">Add Something</button>
<div id="test"></div>
Edit 1
After reading through the OP's question, I'm not 100% that the code below answers what they were looking for. I've asked for further clarification and will keep this answer here until I know more.
Original
I've got some code working on a code pen Here, but I will add it to the snippet editor.
var tree = [{
text: "Parent 1",
nodes: [{
text: "Child 1",
nodes: [{
text: "Grandchild 1",
nodes: [{
text: "GrandChild 3"
}]
}, {
text: "Grandchild 2",
nodes: [{
text: "GrandChild 4"
}]
}]
}, {
text: "Child 2"
}]
}, {
text: "Parent 2"
}, {
text: "Parent 3"
}, {
text: "Parent 4"
}, {
text: "Parent 5"
}];
function recursive_tree(data, tag, child_wrapper, level) {
var html = [];
//return html array;
level = level || 0;
child_wrapper = (child_wrapper != false) ? child_wrapper : 'ul';
$.each(data, function(i, obj) {
var el = $('<' + tag + '>');
el.html(obj.text);
if (obj.hasOwnProperty('nodes')) {
var wrapper = $('<' + child_wrapper + '>');
var els = recursive_tree(obj.nodes, tag, child_wrapper);
wrapper.append(els);
wrapper.appendTo(el);
}
html.push(el);
});
return html;
}
$(document).ready(function() {
var html = recursive_tree(tree, 'li', 'ul');
console.log(html);
$('#parent').append(html);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="parent"></ul>
What you're looking for is something called Recursion, and it's used a lot for things exactly like this. There tends to be a nested/self similar structure.
This should be enough for a basic idea of what to do, from here it's really change the html that gets created. I've never used Bootstrap Treeview, so I have no idea how it is setup HTML wise, otherwise I'd have this be a bit more exact.

items not within the <ul></ul>

I create a menu with a javascript object and jquery. I have certain items that needs to be in the <ul></ul> but instead they're beneath it.
http://jsfiddle.net/MWBt6/
I have 'Index' for example. In there I want to append a list of items.
I know the category id is 0 and the item id is 2, i stored those things in the data attribute.
Now how can I append a ul to that one?

That's not how append works. You need to create the elements on their own. Here:
var loadPath = "resources/books/book1/";
var menu = {
data: [{
name: "the book",
id: 0,
items: [{
name: "Introduction",
id: 0,
target: "inleiding.html"
}, {
name: "Content",
id: 1
}, {
name: "Index",
id: 2
}]
}, {
name: "my stuff",
id: 1,
items: [{
name: "Notes",
id: 0
}, {
name: "Marks",
id: 1
}]
}, {
name: "other",
id: 2,
items: [{
name: "Search",
id: 0
}, {
name: "Continue Reading",
id: 1
}]
}]
}
$(document).ready(function() {
var $menu = $('#menu');
for(var i = 0; i < menu.data.length; i++) {
var categorie = menu.data[i];
var categorieName = categorie.name;
var categorieId = categorie.id;
var items = categorie.items;
console.log("categorieName: " + categorieName);
var list = $('<ul>');
for(var j = 0; j < items.length; j++) {
var itemId = items[j].id;
list.append($('<li>').attr('data-itemId', itemId).text(items[j].name));
}
$menu.append(
$('<li>').attr('data-categorieId', categorieId).append(categorieName, list)
);
}
});​
Here's the updated jsFiddle.

You are trying to append as if the DOM is a text editor. You can't append the beginning of an element with it's opening tag, then later close that element with an append of a closing tag. Only full valid elements can be inserted into the DOM.
Instead, build an html string, then only make one append after the string is completed. This method is far more efficient than doing multiple appends also
Working demo: http://jsfiddle.net/MWBt6/3/