We Keep Coding

How to insert a row in Javascript with a loop?

I have a json file and I want to convert the data into a table with Javascript. I found some similar questions How to convert the following table to JSON with javascript? , loop through a json object, but they all use jQuery and show the table on html web. I just need a simple loop to insert row into the table. I tried 'append', 'insert' and 'insertRow', all not work. Could anyone give me a hint?
Json file:
{
"name": "lily",
"country": "china",
"age": 23
},
{
"name": "mike",
"country": "japan",
"age": 22
},
{
"name": "lucy",
"country": "korea",
"age": 25
}
My code:
var jdata = {};
jdata.cols = [
{
"id": "1",
"label": "name",
"type": "string"
},
{
"id": "2",
"label": "country",
"type":"string"
}
];
for(var i = 1; i < 3; i++){
row = [
{
"c": [
{
"v": json["hits"]["hits"][i]["_source"]["name"]
},
{
"v": json["hits"]["hits"][i]["_source"]["country"]
}
]
}
];
jdata.rows.insertRow(row);
}
Edit: Add expected output: change the json file to the following structure.
[
['lily', 'china'],
['mike', 'japan'],
['lucy', 'korea'],
]

I guess you need push (Or concat / push(...elements) if you want to add array of rows)
jdata.rows = [];
for(var i = 1; i < 3; i++){
row = [
{
"c": [
{
"v": json["hits"]["hits"][i]["_source"]["name"]
},
{
"v": json["hits"]["hits"][i]["_source"]["country"]
}
]
}
];
jdata.rows.push(row);
// for elements from row
// jdata.rows.push(...row)
}

There are a few errors in your code
The JSON needs to be an array so you can loop through each object to display.
insertRow() is a method from the Table object, jdata.rows is not a Table object but an array.
Since, you have used insertRow(), I have rewritten your code to display the table data using the Table Object methods. Here is a code snippet
Edit: You can use the push() method to create your required JSON structure. I have edited the code snippet to create your required JSON.
var jdata = {
cols: [{
"id": "1",
"label": "name",
"type": "string"
},
{
"id": "2",
"label": "country",
"type": "string"
}
],
rows: []
};
var persons = [{
"name": "lily",
"country": "china",
"age": 23
},
{
"name": "mike",
"country": "japan",
"age": 22
}, {
"name": "lucy",
"country": "korea",
"age": 25
}
];
var table = document.getElementById("table");
var header = table.createTHead();
var footer = table.createTFoot();
var rowHeader = header.insertRow(0);
jdata.cols.forEach((col, index) => {
var cell = rowHeader.insertCell(index);
cell.innerHTML = col.label;
});
persons.forEach((person, index) => {
var rowFooter = footer.insertRow(index);
rowFooter.insertCell(0).innerHTML = person.name;
rowFooter.insertCell(1).innerHTML = person.country;
jdata.rows.push([person.name, person.country]);
});
console.log(jdata.rows);
<table id="table">
</table>

Transform array using javascript or angular js

I need to transform below Json array to another array as mentioned below using angularjs/ javascript.
Input Array = [{"Name":"123", "Type": "Type1", "Total":"24"}, {"Name":"123", "Type": "Type2", "Total":"25"}, {"Name":"124", "Type": "Type1", "Total":"26"}, {"Name":"124", "Type": "Type2", "Total":"27"}]
Output Array: [{"Name":"123", "Type1":"24", "Type2":"25"}, {"Name":"124", "Type1":"26", "Type2":"27"}

I would work it out with reduce function I've added some comments for you inside as well:
let inputArray = [{"Name":"123", "Type": "Type1", "Total":"24"}, {"Name":"123", "Type": "Type2", "Total":"25"}, {"Name":"124", "Type": "Type1", "Total":"26"}, {"Name":"124", "Type": "Type2", "Total":"27"}];
// and do reduce function on it
inputArray.reduce((prevVal, currVal, index) => {
// first check if there's Name in already
if (prevVal.find(x => x.Name === currVal.Name)) {
// if there's a Name same as current element use new type as a key and add Total
prevVal.find(x => x.Name === currVal.Name)[currVal.Type] = currVal.Total;
} else {
// in case there's no Name then just create object with it
prevVal.push({
Name: currVal.Name,
[currVal.Type]: currVal.Total
});
}
return prevVal;
}, []);
Here's fiddle:
https://jsfiddle.net/pegla/s9hwbth4/

All you have to do is, get the unique objects from the original list based on Name.
var obj = [{
"Name": "123",
"Type": "Type1",
"Total": "24"
},
{
"Name": "123",
"Type": "Type2",
"Total": "25"
},
{
"Name": "124",
"Type": "Type1",
"Total": "26"
},
{
"Name": "124",
"Type": "Type2",
"Total": "27"
}
];
var getIndex = function(list, property, object) {
for (var i = 0; i < list.length; i++) {
if (list[i][property] == object[property]) {
return i;
}
}
return -1;
}
var result = [];
for (var i = 0; i < obj.length; i++) {
/* Call getIndex to return the index of element in the result and add the type name property */
var index = getIndex(result, 'Name', obj[i]);
if (index != -1) {
result[index][obj[i].Type] = obj[i].Total;
} else {
var newObj = {};
newObj.Name = obj[i].Name;
newObj[obj[i].Type] = obj[i].Total;
result.push(newObj);
}
}
console.log(result);

You don't need angularjs to do that. You can do that using simple javascript for block. Please see attached code. Best,
let input = [{"Name":"123", "Type": "Type1", "Total":"24"}, {"Name":"123", "Type": "Type2", "Total":"25"}, {"Name":"124", "Type": "Type1", "Total":"26"}, {"Name":"124", "Type": "Type2", "Total":"27"}];
let output = [];
for(let i=0; i<input.length-1;i++){
output.push({
"Name":input[i].Name,
"Type1":input[i].Total,
"Type2":input[i+1].Total,
});
i++;
}
console.log(output);

How to convert one object json to array object json?

My object json is like this :
var a = [{
"attributes": {
"Code": "SGL",
"Total": "811400"
},
"DayPrice": {
"Date": "2016-07-22",
"Rate": "811400"
}
}];
I want change DayPrice to array like this :
var a = [{
"attributes": {
"Code": "SGL",
"Total": "811400"
},
"DayPrice": [{
"Date": "2016-07-22",
"Rate": "811400"
}]
}];
Any solution to solve my problem?
Thank you very much

You would need to loop through the array of objects and wrap the DayPrice property of each in an array, like this:
for (var i = 0; i < a.length; i++) {
a[i].DayPrice = [a[i].DayPrice];
}
Working example

Assign the an array with the property to the property.
a[1].DayPrice = [a[1].DayPrice];
Or use a loop:
var a = [{ "attributes": { "Code": "SGL", "Total": "811400" }, "DayPrice": { "Date": "2016-07-22", "Rate": "811400" } }];
a.forEach(function (a) {
if ('DayPrice' in a) {
a.DayPrice = [a.DayPrice];
}
});
document.write('<pre>' + JSON.stringify(a, 0, 4) + '</pre>');

Hope this will help
var a = [{
"attributes": {
"Code": "SGL",
"Total": "811400"
},
"DayPrice": {
"Date": "2016-07-22",
"Rate": "811400"
}
}];
var _getDayPrice = a[0].DayPrice;
var _dayPriceArray = [];
_dayPriceArray.push({
"Date":_getDayPrice.Date,
"Rate":_getDayPrice.Rate
})
a[0].DayPrice=_dayPriceArray;
console.log(a);
Check this jsFiddle

Pass Json to javascript in specific format to render the chart

I am working on chart library,
I have json format, which will be coming from server, year and month format
{
"id": 1,
"name": "name1",
"present": "18",
"target": "18",
"status": "yellow"
}
Now I need to pass present and target values in a array format.
the data must be passed or parsed like below.
How to do I do this in javascript and jquery?
I tried all the available solutions, since I am new to the javascript world!
Expected result
var legendsText = [["present name1","target name1"]],
jsonFormat = [[18, 18],[15,18],[36, 18]];
FIDDLE
This is the fiddle our friend Eli Gassert has created, it is the closeset one
http://http://jsfiddle.net/Yq3DW/126/
but it is loading only present values of all 3 months
i want present and target values of each name.
For example
name1 link clicked, chart should load name1 present and target for all 3 months.
name2 link clicked, chart should load name2 present and target for all 3 months.
name3 link clicked, chart should load name3 present and target for all 3 months.
My JSON format which is coming dynamically from server
data={
"perspective": "something",
"year": "2014",
"measures": [
{
"id": 1,
"name": "some name",
"target": "200",
"responsiblePerson": null
},
{
"id": 2,
"name": "some name",
"target": "100",
"responsiblePerson": null
}
],
"values": {
"jan": [
{
"id": 1,
"name": "name1",
"present": "18",
"target": "18",
"status": "yellow"
},
{
"id": 2,
"name": "name2",
"present": "21",
"target": "22",
"status": "red"
},
{
"id": 3,
"name": "name3",
"present": "50",
"target": "50",
"status": "yellow"
}
],
"feb": [
{
"id": 1,
"name": "name1",
"present": "18",
"target": "18",
"status": "yellow"
},
{
"id": 2,
"name": "name2",
"present": "21",
"target": "22",
"status": "red"
},
{
"id": 3,
"name": "name3",
"present": "50",
"target": "50",
"status": "yellow"
}
],
"mar": [
{
"id": 1,
"name": "name1",
"present": "18",
"target": "18",
"status": "yellow"
},
{
"id": 2,
"name": "name2",
"present": "22",
"target": "22",
"status": "yellow"
},
{
"id": 3,
"name": "name3",
"present": "52",
"target": "50",
"status": "yellow"
}
]
}
}
HTML
<div id="chart"></div>
JS
var legendsText = [];
for(var i = 0; i != data.measures.length; ++i)
legendsText.push(data.measures[i].name);
legendsText = [legendsText];
var rows = [];
for(var i in data.values)
{
var row = []
for(var j = 0; j != data.values[i].length; ++j)
{
row.push(data.values[i][j].present);
}
rows.push(row);
}
rows = legendsText.concat(rows.sort(function (a, b) { }));
console.log(rows);
var chart = c3.generate({
bindto: '#chart',
data: {
rows: rows,
type: 'bar',
}
});
Any help is appreciated.

Here's an updated fiddle that transforms your data to the results: http://jsfiddle.net/Yq3DW/119/
Key aspects:
Your Legend Text can be gotten dynamically from your measures data. The format for the legendsText is an "array of arrays" so that's why I wrap it in [...] at the end of the loop.
var legendsText = [];
for(var i = 0; i != data.measures.length; ++i)
legendsText.push(data.measures[i].name);
legendsText = [legendsText];
Your rows can be gotten from your "values" data. But because it's not an array, like measures you need to use a for each loop instead of for loop:
var rows = [];
for(var i in data.values)
{
var row = []
for(var j = 0; j != data.values[i].length; ++j)
{
row.push(data.values[i][j].present);
}
rows.push(row);
}
EDIT: Updated question. To show just one label's worth of data but show both values for that data, and give nice labels: http://jsfiddle.net/Yq3DW/130/
The key here:
Switch to columns instead of rows, allowing one "row" of data to stand-in for the label indexer
Only add the data if the name in the value data matches the name you're searching for (had to update your data JSON so the names matched)
Had to use a 'tick' formatter to format the labels from 1-3 to jan, feb, mar. You can further customize it by using upper case/proper case conversions. That is outside the scope of this question and I'm not including it here. If you need further formatting, search for an answer first and if you can't find it, start a new Q.
Display a dynamic list of links to click that calls your loadData function to change the data in the chart between the various measure names
HTML:
<ul id="links"></ul>
<div id="chart"></div>
JS:
var $links = $('#links');
$links.html('');
for(var i = 0; i != data.measures.length; ++i)
{
(function()
{
var name = data.measures[i].name;
$('<li></li>')
.text(data.measures[i].name)
.click(function() { loadData(name); })
.appendTo($links);
})();
// legendsText.push(data.measures[i].name);
}
function loadData(name)
{
//var legendsText = [ ["present", "target"] ];
var columns = [ ["labels"], [ "present" ], [ "target" ]];
var labels = [];
for(var i in data.values)
{
var row = []
for(var j = 0; j != data.values[i].length; ++j)
{
if(data.values[i][j].name == name)
{
labels.push(i);
columns[0].push(labels.length);
columns[1].push(data.values[i][j].present);
columns[2].push(data.values[i][j].target);
}
}
//rows.push(row);
}
console.log(columns);
//rows = legendsText.concat(rows.sort(function (a, b) { }));
var chart = c3.generate({
bindto: '#chart',
data: {
x: 'labels',
columns: columns,
type: 'bar',
},
axis: {
x: {
tick: {
format: function(index) { return labels[index-1]; }
}
}
}
});
}

How to select json item from the array

From the below JSON, how can I retrieve title from the note and notes using a for loop and ajax to retrieve?
{
"infos": {
"info": [
{
"startYear": "1900",
"endYear": "1930",
"timeZoneDesc": "daweerrewereopreproewropewredfkfdufssfsfsfsfrerewrBlahhhhh..",
"timeZoneID": "1",
"note": {
"notes": [
{
"id": "1",
"title": "Mmm"
},
{
"id": "2",
"title": "Wmm"
},
{
"id": "3",
"title": "Smm"
}
]
},
"links": [
{ "id": "1", "title": "Red House", "url": "http://infopedia.nl.sg/articles/SIP_611_2004-12-24.html" },
{ "id": "2", "title": "Joo Chiat", "url": "http://www.the-inncrowd.com/joochiat.htm" },
{ "id": "3", "title": "Bake", "url": "https://thelongnwindingroad.wordpress.com/tag/red-house-bakery" }
]
}
I tried out the code below but it doesn't work - it either says:
is null
not an object
length is null
r not an object
var detail = eval(xmlhttprequest.responseText)
var rss = detail.infos.info
for(var i = 0; i<rss.length; i++)
startyear += rss[i].startyear

Use
for (i = 0; i < 3; i++) {
alert(JSON.infos.info[0].note.notes[i].title);
}
TRY IT HERE: JSFIDDLE WORKING EXAMPLE
BTW your JSON is not valid. Use this JSON:
var JSON = {
"infos": {
"info": [
{
"startYear": "1900",
"endYear": "1930",
"timeZoneDesc": "daweerrewereopreproewropewredfkfdufssfsfsfsfrerewrBlahhhhh..",
"timeZoneID": "1",
"note": {
"notes": [
{
"id": "1",
"title": "Mmm"
},
{
"id": "2",
"title": "Wmm"
},
{
"id": "3",
"title": "Smm"
}
]
},
"links": [
{
"id": "1",
"title": "Red House",
"url": "http://infopedia.nl.sg/articles/SIP_611_2004-12-24.html"
},
{
"id": "2",
"title": "Joo Chiat",
"url": "http://www.the-inncrowd.com/joochiat.htm"
},
{
"id": "3",
"title": "Bake",
"url": "https://thelongnwindingroad.wordpress.com/tag/red-house-bakery"
}
]
}
]
}
}
EDIT:
Here is what you want:
var infoLength= JSON.infos.info.length;
for (infoIndex = 0; infoIndex < infoLength; infoIndex++) {
var notesLength= JSON.infos.info[infoIndex].note.notes.length;
for (noteIndex = 0; noteIndex < notesLength; noteIndex++) {
alert(JSON.infos.info[infoIndex].note.notes[noteIndex].title);
}
}

Putting your json into an var called obj, use the following:
obj.infos.info[0].note.notes[0].title
http://jsfiddle.net/Znq34/

Well the "path" to the JSON notes array-like object is:
json.infos.info[0].note.notes;
So you could do something like:
var notes = json.infos.info[0].note.notes;
var titles = [];
for (var i = 0, len = notes.length; i < len; i++)
{
titles.push(notes[i].title);
}
alert('titles is: ' + titles.join(', '));
Fiddle: http://jsfiddle.net/garreh/uDxqD/
Are you using jQuery? ;-)
// Assuming your using "success" in ajax response
success: function(json)
{
var titles = $(json.infos.info[0].note.notes).map(function() {
return this.title;
}).get();
alert(titles.join(', '));
}

First count the length of notes
var len = jsonobject.infos.info.note.notes.length;
Then loops through and get
var title = jsonobject.infos.info.note.notes[i].title;