Develop Reference

How to display nested JSON object in the form of table and rest JSON value as simple text

I want to display nested JSON objects.
This is what I have done so far:
orders = [
{ "custname": "Jack Smith", "mobile": "425361434", "location": "Sector 14", "slot": "12PM2PM", "value": 72.6, "items": [{ "prodcode": "PEP122", "quantity": 2 }, { "prodcode": "COK238", "quantity": 4 }] },
{ "custname": "Mary Gomes", "mobile": "723476123", "location": "Sector 22", "slot": "4PM6PM", "value": 130.60, "items": [{ "prodcode": "SUN677", "quantity": 2 }, { "prodcode": "LUX831", "quantity": 4 }, { "prodcode": "DET810", "quantity": 1 }] },
{ "custname": "Tim May", "mobile": "835099614", "location": "Pioneer Chowk", "slot": "Before 10AM", "value": 705, "items": [{ "prodcode": "GAR004", "quantity": 6 }, { "prodcode": "RB0277", "quantity": 3 }, { "prodcode": "MIR411", "quantity": 2 }] }
];
function showAllOrder() {
showtable();
}
function showtable() {
for (var i = 0; i < orders.length; i++) {
order = orders[i];
var str = "<div><div class='cell22' onclick=clicked(0)>Product</div>";
str = str + "<div class='cell22' onclick=clicked(1)>Qantity</div>";
var len = orders[i].items.length;
for (var j = 0; j < len; j++) {
for (var x = 0; x <)
//this value as simple text form above the table
var cost = ("Coustomer Name :" + order.custname);
var mob = (" Mobile :" + order.mobile);
var loc = (" Location :" + order.location);
var del = (" Delivery Slot :" + order.slot);
//this value in the form of table
var prod1 = "<div class='cell11'>" + orders[i].items[j].prodcode + "</div>";
var qty1 = "<div class='cell11'>" + orders[i].items[j].quantity + "</div>";
var row = "<div>" + cost + mob + loc + del + prod1 + qty1 + "</div>";
str = str + row;
}
}
var element = document.getElementById("mytable01");
element.innerHTML = str;
}

javascript looping changing values of other objects

for (var i = 0; i < itemArray.length; i++) {
//console.log(itemArray[index].mats);
var newMatArray = [];
for (var j = 0; j < itemArray[i].mats.length; j++) {
var mat = itemArray[i].mats[j];
if (isInNewArray(mat.id, newMatArray)) {
continue;
}
for (var k = 0; k < itemArray[i].mats.length; k++) {
var mat2 = itemArray[i].mats[k];
if (k == j) {
continue;
}
if (mat.id == mat2.id) {
//if (itemArray[i].id == 12005) console.log("adding " + mat.quantity + " of " + mat.name + " to " + mat2.quantity);
mat.quantity = mat.quantity + mat2.quantity;
}
}
newMatArray.push(mat);
}
//if (itemArray[i].id == 12005) console.log(newMatArray);
itemArray[i].mats = newMatArray;
}
function isInNewArray(id, array) {
for (var i = 0; i < array.length; i++) {
if (array[i].id == id) {
return true;
}
}
return false;
}
So this loop is supposed to iterate over an array of items and remove/combine duplicate mats required for an item, each item is a json object with a name/id and a mats array of objects and each mat has a name/id/quantity required. For some reason if i iterate over only 1 item at some point in the array then continue on all the rest without combining it works totally fine.
It's only when its looping that changing the values of previous objects seems to change the value of future objects resulting in mats hitting quantities of 1.17555e^105 which is way higher than they should be. Does javascript do some kind of memory optimization that might be storing mat objects with identical values to the same location so when i increase the quantity on objects earlier in the loop it does so for objects later in the loop? Otherwise I don't understand why this algorithim works for 1 off objects but looping over objects and only ever changing one object at a time messes it up.
Edit: sample object below
{
"id": 622,
"bpid": 692,
"quantity": 1,
"name": "Stabber",
"mats": [
{
"id": 34,
"name": "Tritanium",
"quantity": 48518335
},
{
"id": 35,
"name": "Pyerite",
"quantity": 11828791
},
{
"id": 36,
"name": "Mexallon",
"quantity": 40000
},
{
"id": 37,
"name": "Isogen",
"quantity": 10333
},
{
"id": 38,
"name": "Nocxium",
"quantity": 2778
},
{
"id": 39,
"name": "Zydrine",
"quantity": 1244
},
{
"id": 40,
"name": "Megacyte",
"quantity": 244
},
{
"id": 20411,
"name": "Datacore - High Energy Physics",
"quantity": 8
},
{
"id": 20172,
"name": "Datacore - Minmatar Starship Engineering",
"quantity": 8
}
]
}
for (var i = 0; i < matsArray.length; i++) {
var item = matsArray[i];
var type = parseInt(item.typeID, 10);
var index = findItemIndex(type);
if (index > -1) {
var mat = {
id: parseInt(item.materialTypeID, 10),
name: itemIDMap.get(parseInt(item.materialTypeID, 10)),
quantity: parseInt(item.quantity, 10)
}
itemArray[index].mats.push(mat);
} else {
if (bpMap.get(parseInt(item.typeID, 10)) == undefined) {
//console.log(item);
continue;
}
var newItem = {
id: bpMap.get(parseInt(item.typeID, 10)).itemID,
bpid: parseInt(item.typeID, 10),
quantity: bpMap.get(parseInt(item.typeID, 10)).quantityPerRun,
name: itemIDMap.get(bpMap.get(parseInt(item.typeID, 10)).itemID),
mats: []
}
var mat = {
id: parseInt(item.materialTypeID, 10),
name: itemIDMap.get(parseInt(item.materialTypeID, 10)),
quantity: parseInt(item.quantity, 10)
}
newItem.mats.push(mat);
itemArray.push(newItem);
productsArray.push(newItem.id);
}
}
Would this array creation code create identical mat objects? Shouldn't each newly created mat be a separate object?

How to loop through jason data and display it in data list tag (dl)

I'm trying to loop through some JSON data (var mydata) and mydata is an array of two elements, the second element in the array
mydata[1] is a multidimensional array, I need to display the first element i.e mydata[0] in a dt and display elements from mydata[1] in a dd within that.
I tried every option but I'm really stuck and I need any help on this. Below is my code:
var mydata = [
[{
"id": "67",
"name": "Baby & Toddler Clothing "
}, {
"id": "68",
"name": "Kids' Clothing, Shoes & Accessories"
}, {
"id": "69",
"name": "Costumes, Reenactment Theater"
}],
[
[{
"id": "572",
"name": "Baby Clothing Accessories "
}, {
"id": "573",
"name": "Baby Shoes"
}],
[{
"id": "579",
"name": "Boys Clothing [Sizes 4 & Up] "
}, {
"id": "580",
"name": "Boys Shoes"
}],
[{
"id": "588",
"name": "Costumes"
}, {
"id": "589",
"name": "Reenactment & Theater "
}]
]
]
function getCategories(id){
$.ajax({
url: '{$getcatUrl}',
type: 'POST',
data: {category_id: id},
success: function (data) {
data = jQuery.parseJSON(data);
//console.log(data); return;
if(data.length > 0){
firstdata = data[0];
secdata = data[1];
for(var i = 0; i < firstdata.length; i++) {
level_1 = firstdata[i].name;
level_1_id = firstdata[i].id;
for(var j = 0; j< secdata.length; j++){
if(secdata[i][j] !== undefined){
level_2='';
level_2 = secdata[i][j].name;
level_2_id = secdata[i][j].d;
}
console.log(level_2);
}
var dldata = $(
'<dl>'+
"<dt href='" + level_1_id + "'>" + level_1 + "</dt>"+
"<dd href='" + level_2_id + "'>" + level_2 + "</dd>"+
'</dl>'
);
}
}else{
console.log('no item for this categories');
}
},
error: function(jqXHR, errMsg) {
// handle error
console.log(errMsg);
}
});
}
The var level_1 and level_1_id works fine, but i keep getting error for variable level_2, the error says can't read property 'name' of undefined, any solution to this problem will be appreciated and am also open to new ideas about doing it better,

Essentially the problem is that you overwrite the level_1 and level_2 variables each time your for loops run. So by the time you get to the code which makes the HTML, they have been overwritten multiple times and only the last version remains, and you only print that once in any case.
This will resolve it - in this case by generating the HTML elements directly within each loop, although you could of course do it by appending to a variable and then outputting everything at the end, if that's your preference.
var data = [
[{
"id": "67",
"name": "Baby & Toddler Clothing "
}, {
"id": "68",
"name": "Kids' Clothing, Shoes & Accessories"
}, {
"id": "69",
"name": "Costumes, Reenactment Theater"
}],
[
[{
"id": "572",
"name": "Baby Clothing Accessories "
}, {
"id": "573",
"name": "Baby Shoes"
}],
[{
"id": "579",
"name": "Boys Clothing [Sizes 4 & Up] "
}, {
"id": "580",
"name": "Boys Shoes"
}],
[{
"id": "588",
"name": "Costumes"
}, {
"id": "589",
"name": "Reenactment & Theater "
}]
]
]
if (data.length > 0) {
var content = $("#content");
firstdata = data[0];
secdata = data[1];
for (var i = 0; i < firstdata.length; i++) {
var dl = $("#content").append("<dl/>");
dl.append("<dt href='" + firstdata[i].id + "'>" + firstdata[i].name + "</dd>");
for (var j = 0; j < secdata.length; j++) {
if (secdata[i][j] !== undefined) {
dl.append("<dd href='" + secdata[i][j].id + "'>" + secdata[i][j].name + "</dd>");
}
}
}
content.append(dl);
} else {
console.log('no item for this categories');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content"></div>

Create an array based on same Id in javascript

This an example request object.
"stories": [
{
"ID": "1",
"TRADER_ID": "38",
"IMAGE": ""
},
{
"ID": "2",
"TRADER_ID": "38",
"IMAGE": ""
},
{
"ID": "3",
"TRADER_ID": "40",
"IMAGE": ""
},
{
"ID": "4",
"TRADER_ID": "40",
"IMAGE": ""
},]
like this i will be having list of story, I want create an array based on same TRADER_ID. because i need to add an image slide slider, for unique Traader Id i can get the image url

This is madness I know, but works. If anyone is able to simplify it, please do it :P
OP wrote: "i need output like ["38", "38"] ["40", "40"]"
var stories = [{
"ID": "1",
"TRADER_ID": "38"
}, {
"ID": "2",
"TRADER_ID": "38"
}, {
"ID": "3",
"TRADER_ID": "40"
}, {
"ID": "4",
"TRADER_ID": "40"
}];
(function change(array) {
var ids = [];
stories.forEach(v => ids.push(v.TRADER_ID));
var sortedArr = [...new Set(Array.from(ids))];
var newOne = [];
var times = 0;
var obj = {};
var result = [];
var cb = [];
for (var i = 0; i < sortedArr.length; i++) {
for (var j = 0; j < stories.length; j++) {
if (stories[j].TRADER_ID == sortedArr[i]) {
times++;
}
}
obj.prop = sortedArr[i];
obj.times = times;
newOne.push(obj);
obj = {};
times = 0;
}
for (var k = 0; k < newOne.length; k++) {
for (var l = 0; l < newOne[k].times; l++) {
cb.push(newOne[k].prop);
}
result.push(cb);
cb = [];
}
console.log(result);
})(stories);

You can use the ID as the index of array and the TRADER_ID as number and make a sort or find the element by numbres (TRADER_ID)

Compare two objects in jQuery and get the difference [duplicate]

This question already has answers here:
How to get the difference between two arrays in JavaScript?
(84 answers)
Closed 7 years ago.
Using jQuery I would like to compare 2 objects:
sourceArray:
var origArray = [{
"Name": "Single",
"URL": "xxx",
"ID": 123
},
{
"Name": "Double",
"URL": "yyy",
"ID": 345
},
{
"Name": "Family",
"URL": "zzz",
"ID": 567
}];
destination array
var destArray = [{
"Name": "Single",
"URL": "xxx",
"ID": 123
},
{
"Name": "Double",
"URL": "yyy",
"ID": 888
},
{
"Name": "Family",
"URL": "zzz",
"ID": 567
}];
What I would like to do, is compare the target object with the source object based on the ID and find the mis-matched entries with a description on the resultant object. So the result will look like this:
var resultArray = [{
"Name": "Double",
"URL": "yyy",
"ID": 888,
"desc": "missing in source"
},
{
"Name": "Double",
"URL": "yyy",
"ID": 345,
"desc": "missing in destination"
}];
Any quick help is really appreciated.

This isn't a good use of jQuery, but here is some vanilla javascript that does what you want.
function objDiff(array1, array2) {
var resultArray = []
array2.forEach(function(destObj) {
var check = array1.some(function(origObj) {
if(origObj.ID == destObj.ID) return true
})
if(!check) {
destObj.desc = 'missing in source'
resultArray.push(destObj)
}
})
array1.forEach(function(origObj) {
var check = array2.some(function(destObj) {
if(origObj.ID == destObj.ID) return true
})
if(!check) {
origObj.desc = 'missing in destination'
resultArray.push(origObj)
}
})
return resultArray
}
https://jsfiddle.net/9gaxsLbz/1/

If you are wanting to dedupe your array, this will work:
var merged = origArray.concat(destArray);
var unique = merged.filter(function(item) {
return ~this.indexOf(item.ID) ? false : this.push(item.ID);
}, []);
Fiddle: https://jsfiddle.net/Ljzor9c6/
If you are only wanting items that were duped, you can easily invert the condition:
var merged = origArray.concat(destArray);
var dupes = merged.filter(function(item) {
return ~this.indexOf(item.ID) ? true : !this.push(item.ID);
}, []);

You can loop through the items in the first array and put the ID's in a map, then loop through the items in the second array and remove the matching ID's and add the missing.
Then just loop through the map to create the objects in the resulting array:
var origArray = [{
"Name": "Single",
"URL": "xxx",
"ID": 123
},
{
"Name": "Double",
"URL": "yyy",
"ID": 345
},
{
"Name": "Family",
"URL": "zzz",
"ID": 567
}];
var destArray = [{
"Name": "Single",
"URL": "xxx",
"ID": 123
},
{
"Name": "Double",
"URL": "yyy",
"ID": 888
},
{
"Name": "Family",
"URL": "zzz",
"ID": 567
}];
var map = {};
for (var i = 0; i < origArray.length; i++) {
map[origArray[i].ID] = 'source';
}
for (var i = 0; i < destArray.length; i++) {
var id = destArray[i].ID;
if (id in map) {
delete map[id];
} else {
map[id] = 'destination';
}
}
var resultArray = [];
for (key in map) {
var arr = map[key] == 'source' ? origArray : destArray;
for (var i = 0; arr[i].ID != key; i++) ;
resultArray.push({
Name: arr[i].Name,
URL: arr[i].URL,
ID: arr[i].ID,
desc: 'missing in ' + map[key]
});
}
// show result in StackOverflow snippet
document.write(JSON.stringify(resultArray));

var result = [];
for(var i = 0; i < oa.length; i++) {
var idx = mIndexOf(oa[i].ID);
if(idx > -1) {
oa.splice(i, 1);
da.splice(idx, 1);
}
}
for(var i = 0; i < oa.length; i++) {
var ln = result.length;
result[ln] = oa[i];
result[ln].desc = "missing in destination";
}
for(var i = 0; i < da.length; i++) {
var ln = result.length;
result[ln] = da[i];
result[ln].desc = "missing in origin";
}
function mIndexOf(id) {
for(var i = 0; i < oa.length; i++)
if(oa[i].ID == id)
return i;
return -1;
}
console.log(result);
0: Object
ID: 345
Name: "Double"
URL: "yyy"
desc: "missing in destination"
1: Object
ID: 888
Name: "Double"
URL: "yyy"
desc: "missing in origin"
jsfiddle DEMO

For things like this, you should use lodash. With lodash you can just do this:
var resultArray = _.defaults(destArray, origArray);