We Keep Coding

Uncaught TypeError: Cannot read property 'dispatchEvent' of null

I am getting the above error when I run my function. The goal is when a user enters a number in a search box it should zoom to that number in the visualization. Below is my code -
function zoom1() {
var input1 = document.getElementById("myInput1").value; //value from searchbox
console.log("input from searchbox :"+input1);
d3.json("intervals.json", function(alldata) // entering json file to look for oid
{
// console.log("all data from json"+alldata);
var i=0;
for (i = 0; i < alldata.records.length; i++) //for loop for getting the "oid" alldata.records.length;
{
conceptid1 = alldata.records[i].eag; //saving all the oid in conceptid
console.log("conceptid1: "+conceptid1);
var conceptid2 = conceptid1.toString();
console.log("conceptid2: "+conceptid2);
if (conceptid2 === input1) //if the user input1 matches conceptid2
{
console.log("inside if conceptid2:"+conceptid2);
console.log(document.getElementById(conceptid2).dispatchEvent(new Event('click'))); // zoom
}
}
});
}

Can you share the console log for conceptid2?
By the way, use ES6 syntax. It's a newer and better way to write JS. Here is your code written in ES6:
const zoom = () => {
let value = document.querySelector("#myInput1").value;
console.log(`Input ${value}`);
d3.json("intervals.json", (alldata) => {
const { records } = alldata;
for (let i = 0; i < records.length; ++i) {
const conceptId = records[i].eag.toString();
console.log(`Concept ID: ${conceptId}`);
if (conceptId === value) {
// Your stuff
}
}
});
}
Anyways didn't want to come on too hard but I hope this helps :)

Getting the Item of Array by name of param

for (...) {
files.push(files[i]);
li_out.push({name : fileName, list_files : files});
}
How to get the Array of list_files by name?
var list_files_of_file3 = li_out[name == "file3" (?????)].list_files;

Array#find can be used in this case.
var list_files_of_file3 = li_out.find(o => o.name === "file3").list_files;
// Variable names changed for DEMO purpose
var files = [];
for (var i = 0; i < 10; i++) {
files.push({
name: 'fileName ' + i,
list_files: 'something ' + i
});
}
var res = files.find(o => o.name === 'fileName 3').list_files;
console.log(res);

How to get the Array of list_files by name?
using filter, try
var result = li_out.filter(function(item){ return item.name == "file3" });
Is it also possible to just return a property of the matching items
instead of the whole object? (below comment #MajidFouladpour)
Once you have got the result
var propertyNames = result.map(function(obj){ return obj.propertName; })

javascript loop form values by name then element id

I have loop going though form values, it is working fine throwing out the values based on the input name. But I would also like to be able to target by specific element id.
This is an example form:
_inputFields: function() {
var rows = [];
for(var i = 1; i <= 12; i++) {
var placeHolder = 'Intro text line ' + i;
var inputID = 'inputIntroText ' + i;
rows.push(<input type="text" className="form-control input-size-lg" name="formInput" id="inputText" placeholder={placeHolder}/>);
rows.push(<input type="text" className="form-control input-size-lg" name="formInput" id="inputTime" placeholder={placeHolder}/>);
}
So I can loop through and grab everything by name i.e. 'formInput' but how can I then grab formInput[inputText] and formInput[inputTime]?
This is my current loop through the values :
// gather form input
var elem = document.getElementsByName('formInput');
console.log(elem);
// Build the object
var obj = {
"DataObject": {
"user": {
"-name": "username"
},
"contentFile": {
"-filename": "Breaking_News",
"lock": {
"-fileIsBeingEdited": "false"
},
"content": {
"line": []
}
}
}
};
var line = obj.DataObject.contentFile.content.line;
for (var i = 0; i < elem.length; i++) {
if (elem[i].value != '') {
line.push({
"-index": i,
"-text": elem[i]['inputText'].value,
"-time": elem[i]['inputTime'].value
});
}
};
If I try:
"-text": elem[i]['inputText'].value,
"-time": elem[i]['inputTime'].value
I get the error: Cannot read property 'value' of undefined

This errors because elem[i]['inputText'] is undefined. This is because you are trying to lookup the inputText property of the element, which doesn't exist.
elem is an array, so I'd recommend using something like filter.
"-text": elem.filter(function(item) {
return item.id === 'inputText';
})[0].value;
Also, you should remove the for loop or you will get a duplicate line.
function getElementById(elems, id){
return elems.filter(function(item) {
return item.id === id;
})[0];
}
var line = obj.DataObject.contentFile.content.line;
line.push({
"-text": getElementById(elem, 'inputText').value,
"-time": getElementById(elem, 'inputTime').value
});
Here's an example jsfiddle.

You can use elem[i].id:
var line = obj.DataObject.contentFile.content.line;
for (var i = 0; i < elem.length; i++) {
if (elem[i].value != '') {
line.push({
"-index": i,
"-text": elem[i].id
// Since you are looping through the inputs, you will get the `inputTime` in the 2nd iteration.
});
}
};

how to loop through array with javascript

I its basic but I am new to javascript. I am trying to loop through the array and match the objects that == my key.
this is what i am using right now, it works but i am only matching the first object that matches, sometimes there will be multiple objects that match.
Here is what i have now
var chartSeries = chartService.getSeries();
var marker.options.subdivision.id = 1345
var matchingSeries = Enumerable.From(chartSeries).Where('x => x.id == "' + marker.options.subdivision.id + '"').ToArray();
var series = {
id: matchingSeries[0].id,
name: matchingSeries[0].name,
data: matchingSeries[0].data,
lineWidth: 5
};
I need to include a for loop to match all objects.
var subIdSeries = [];
var subId = marker.options.subdivision.id;
var series = {
id: matchingSeries[0].id,
name: matchingSeries[0].name,
data: matchingSeries[0].data,
lineWidth: 5
};
for (var i = 0; i < chartSeries.length; i++) {
if (subId == chartSeries.id) {
push.subIdSeries(subId)
}
}

Change
if (subId == chartSeries.id) {
push.subIdSeries(subId)
}
to
if (subId == chartSeries[i].id) {
subIdSeries.push(subId)
}

Without seeing the whole script, from what you have so far, I can suggest:
if (subId == chartSeries[i].id) {
subIdSeries.push(subId)
}

How to dynamically generate javascript objects within other objects. Can you use a for loop inside an object?

I hope to achieve a set of javascript objects something like this:
tabs[0]={
sections[0]={
title:"section0",
children[0]={
title:"Child0"
},
children[1]={
title:"Child1"
},
children[2]={
title:"Child2"
}
},
sections[1]={
title:"section1",
children[0]={
title:"Child0"
},
children[1]={
title:"Child1"
}
}
};
tabs[1]={
sections[0]={
title:"section0",
children[0]={
title:"Child0"
},
children[1]={
title:"Child1"
}
},
sections[1]={
title:"section1",
children[0]={
title:"Child0"
},
children[1]={
title:"Child1"
}
},
sections[2]={
title:"section2",
children[0]={
title:"Child0"
},
children[1]={
title:"Child1"
}
}
};
Here is my code but I'm getting an "Unexpected Token" error at the first for loop within the tab object. Is this not allowed? How could I read these arrays and create objects like those above dynamically? The arrays (and subsequently the objects) can and will change as the .csv files change, which is why I need to dynamically create these objects. These objects will be used in with AngularJS's ng-repeat to create the tabbed and side navigation for an app.
this.tabData = tabsService.tabData;
var tabCount = tabsService.tabData.length;
var tabs={};
var tCounter = 0;
for (tCounter; tCounter<tabCount; tCounter++){
var tabURL = "Contents/Product Groups/"+this.tabData[tCounter]+"/sectionOrder.csv";
tabs[tCounter] ={
"TabSectionData" : $.getCsvArray(tabs[tCounter].tabURL), //gets array from csv file
"sectionCount" : TabSectionData.length
for (sCounter = 0; sCounter<tabs[tCounter].sectionCount; sCounter++){
"tabChildURL" : "Contents/Product Groups/"+this.tabData[tCounter]+"/"+tabs[tCounter].TabSectionData[sCounter]+"/order.csv",
"TabChildData" : $.getCsvArray(tabChildURL) //gets array from csv file
sections[sCounter] ={
"title" = tabs[tCounter].TabSectionData.[sCounter];
cCounter = 0;
for (cCounter = 0; cCounter<TabChildData.length; cCounter++){
children[cCounter]={
"title": tabs[tCounter].TabSectionData[sCounter].TabChildData.[cCounter]
}
}
}
}
}
}

You can run a loop inside a function and instantly execute the function.
I created a Snippet to exemplify.
var obj = {
name: 'My Object',
sections: (function () {
var result = [];
for (var i = 0; i < 10; i++) {
var it = {};
result[i] = it;
it.title = 'Hello';
it.children = [];
for (var j = 0; j < i; j++) {
it.children[j] = 'children' + j;
}
}
return result;
})()
};
var json = JSON.stringify(obj, null, 4);
jQuery('pre').append(json);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre></pre>

Regarding your question, 'Can you use for loop inside an object [literal] ', perhaps to create a list of properties, you may do something like this:
Enclose your for loop inside an immediately invoked function. From that function return the result of the loop.
For example:
I want to dynamically add an array of properties using for loop.
var items = {
list : (function(){ // immediately invoked function
var arr = []; // array
for (var i = 0; i < 4; i++)
{
arr.push('item no. '+i); // add each item to array
}
return arr; // return the array as value of the list property
})()
}
RESULT:
items = {
list : [
"item no. 0",
"item no. 1",
"item no. 2",
"item no. 3"
]
}