We Keep Coding

Create JSON object with same keys for API call

I'm trying to create a JSON object for an API call which has the following format:
....
"Key": "Value",
"Package": {
"Dimensions": {
"UnitOfMeasurement": {
"Code": "IN",
"Description": "inches"
},
"Length": "20",
"Width": "25",
"Height": "30"
},
"PackageWeight": {
"UnitOfMeasurement": {
"Code": "Lbs",
"Description": "pounds"
},
"Weight": "80"
}
},
"Package": {
"Dimensions": {
"UnitOfMeasurement": {
"Code": "IN",
"Description": "inches"
},
"Length": "15",
"Width": "24",
"Height": "27"
},
"PackageWeight": {
"UnitOfMeasurement": {
"Code": "Lbs",
"Description": "pounds"
},
"Weight": "50"
}
},
"Key": "Value",
....
I should add as many "Package" objects as needed. However, I've tried doing this in many different ways but every time that I parse the variable to be used the first objects get overwritten and I end up with only the last object.
This is what I'm trying at the moment, still with no luck:
var lineItems = '{';
for (var i=0;i<inputObject.packages.length;i++) {
lineItems += '"Package": {"PackagingType": {"Code": "02","Description": "Rate"},"Dimensions": {"UnitOfMeasurement": {"Code": "IN","Description": "inches"},"Length": ' + inputObject.packages[i][0].toString() + ',"Width": ' + inputObject.packages[i][1].toString() + ',"Height": ' + inputObject.packages[i][2].toString() + '},"PackageWeight": {"UnitOfMeasurement": {"Code": "Lbs","Description": "pounds"},"Weight": ' + inputObject.packages[i][3].toString() + '}}';
if (i !== inputObject.packages.length-1) {
lineItems += ',';
}
}
lineItems += '}';
lineItems = JSON.parse(lineItems);

How about numbering your packages, ie:
for (var i=0;i<inputObject.packages.length;i++) {
lineItems+='"Package" + i : { ... }'
}
edit: to get required result (as an array - because it's not JSON), here's an example:
var a=[];
var b={"package": {"c":100,"d":200,"e":300}}
var c={"package": {"c":800,"d":700,"e":600}}
a.push(b);
a.push(c);
console.log(a);

Javascript Push Product Info as Object to an Empty Array

I have an array of products would like to add all the product information as an object to an empty array.
var data = {
"Vegetables": [
{
"id": "1",
"title": "Peas",
"type": "Green",
},
{
"id": "2",
"title": "Carrots",
"type": "root",
}
],
"Protein": [
{
"id": "3",
"title": "Steak",
"type": "Meat",
},
{
"id": "4",
"title": "Eggs",
"type": "Dairy"
}
]}
I am able to push just the title to the empty result array with the following:
function getCategory() {
result = [];
for (let item in data) {
data[item].forEach(v => result.push(v.title));
}
document.write(result);
}
getCategory();
But I would like to be able to push all the product information as an object so I can do some formatting. For example:
var myObj= "" ;
myObj = "<div class='box'>" + title +"<br> "+ type + "</div>";
result.push(myObj); // push it to result[]
I am unsure how to adapt the body of the for loop to accommodate my object:
data[item].forEach(v => result.push(v.title + v.type)); // needs to be pushed as object.
Any help appreciated.
Cheers

Reading JSON data and looping through it

I have 3 files
index.html
data.json
app.js
on my WAMP server. I wish to loop through the JSON data and update contents of the HTML file.
These are the contents of my files:
data.json
{
"user": [{
"goal": "HTML essential training",
"type": "Beginner",
"date": "20/07/2016"
}, {
"goal": "CSS essential training",
"type": "Beginner",
"date": "30/07/2016"
}, {
"goal": "CSS core concepts",
"type": "Intermediate",
"date": "10/08/2016"
}, {
"goal": "Javascript essential training",
"type": "Beginner",
"date": "20/08/2016"
}, {
"goal": "Object Oriented JS",
"type": "Advanced",
"date": "30/08/2016"
}]
}
app.js
var request = new XMLHttpRequest();
request.open('GET', 'data.json');
request.onreadystatechange = function() {
if ((request.readyState === 4) && (request.status === 200)) {
var items = JSON.parse(request.responseText);
console.log(items);
for (var key in items) {
console.log(key);
var output = "<tr><td><input type='checkbox' name='record'></td><td>" + items[key].goal + "</td><td>" + items[key].type + "</td><td>" + items[key].date + "</td></tr>";
console.log(output);
$("table tbody").append(output);
output = '';
}
}
}
request.send();
When i run this code, one row is created with all the values set to undefined. I think there's a problem with my looping logic.Please help me.

You are running into this since the object returned is a single key: value pair.
You need to access the user property which is an array.
your code
var items=JSON.parse(request.responseText);
The value you get after parsing the json string is the javascript object with key : 'user' and value : which is an array
Supposed to be
var data =JSON.parse(request.responseText);
var items = data.user; <-- this is an array of objects
// iterate using a for loop, since it is not an object technically
for(var i=0; i < items.length; i++) {

Take a look at the structure of your object:
{
"user": [
{
"goal": "HTML essential training",
"type": "Beginner",
"date": "20\/07\/2016"
},
{
"goal": "CSS essential training",
"type": "Beginner",
"date": "30\/07\/2016"
},
{
"goal": "CSS core concepts",
"type": "Intermediate",
"date": "10\/08\/2016"
},
{
"goal": "Javascript essential training",
"type": "Beginner",
"date": "20\/08\/2016"
},
{
"goal": "Object Oriented JS",
"type": "Advanced",
"date": "30\/08\/2016"
}
]
}
There's one key, with the value being an array.
You need a loop like this:
for (var key in items){if (items.hasOwnProperty(key)) {
for (var i in items[key]) {if (items[key].hasOwnProperty(i)){
console.log(items[key][i]);
var output="<tr><td><input type='checkbox' name='record'></td><td>" + items[key][i].goal + "</td><td>" + items[key][i].type + "</td><td>" + items[key][i].date + "</td></tr>";
console.log(output);
$("table tbody").append(output);
output='';
}}
}}

Getting value from JSON when it is an object in an array in an object in an array - if that makes sense?

I have been working on displaying values from a JSON feed and - with a great deal of thanks to help on the many previous posts I have read here - I can now write (display in browser) all the values of my objects in the main array BUT for the values of the 'name' objects which are 'nested' in an array > object > array > object > proprty:value structure (as below). Wondering if anyone might me kind enough to help me find a way to interate and display this level successfully - I feel I have run out of ideas on it at the moment :-(
Very thankful for an ideas. I have been using standard JavaScript not JQuery I should add.
var foo=[
{
"subjects":
[
"A1",
"SB2"
],
"title": "Box World",
"first_pub": "2013-12",
"characters":
[
{
"name":
{
"given": "Maxwell",
"honourific": "",
"family": "Smart"
},
"id": "MS34"
},
{
"name":
{
"given": "Samantha",
"honourific": "",
"family": "Stevens"
},
"id": "SS81"
} // end creators object 2
],
"publisher": "Galactic Publishing"
},
{
"subjects":
[
"A133",
"PB82"
],
"title": "Octonautica",
"first_pub": "2010",
"characters":
[
{
"name":
{
"given": "Peso",
"honourific": "Doctor",
"family": ""
},
"id": "MS34"
},
{
"name":
{
"given": "Barnacle",
"honourific": "Captain",
"family": ""
},
"id": "SS82"
}
],
"publisher": "Neptune House"
}
]
var obj_set = foo ;
for (var key in obj_set) {
document.write("\<h3\> Publication " + key + "\<\/h3\>" );
var obj = obj_set[key];
document.write("\<ol\>");
for (var prop in obj) {
document.write("\<li\>" + prop + " = " + obj[prop] + "\<\/li\>" );
}
document.write("\<\/ol\>");
}
//END MAIN KEY LOOP

Try this instead:
var i, j;
// iterate over main array foo
for (i=0; i<foo.length; i++) {
// iterate over characters array
for(j=0; j<foo[i].characters.length; j++) {
// each item contains an object "name"
var name = foo[i].characters[j].name;
console.log(name.honorific + ' ' + name.given + ' ' + name.family);
}
}

Join JSON Object member string values together

"category": [{
"id": 28,
"name": "Dogs"
},
{
"id": 14,
"name": "Cats"
},
{
"id": 878,
"name": "Sheep"
}],
I have the above JSON parsed (using .ajax and jsonp as callback) and I would like to join all the values of "name" into a string. i.e. "Dogs, Cats, Sheep". How can I do this? I have tried simple join on "category" and name, i.e.
var cats = categories.join(", ");
OR
var cats = categories.name.join(", ");
But since we are looking at it's members and their string values, it doesn't work.

This looks like a job for $.map!
var data = {
"category": [{
"id": 28,
"name": "Dogs"
},
{
"id": 14,
"name": "Cats"
},
{
"id": 878,
"name": "Sheep"
}]
}
var cats = $.map(data.category, function(v){
return v.name;
}).join(', ');

var text = "";
for(var i=0; category.length; i++)
{
text += category[i].name;
if(i!=category.length-1)
text += ", ";
}

Simpler, shorter version:
const category = [{
"id": 28,
"name": "Dogs"
},
{
"id": 14,
"name": "Cats"
},
{
"id": 878,
"name": "Sheep"
}]
let cats = category.map((item) => {
return item.name;
}).join(", ");
On the first part, the map function will return a string array with the contents item.name.
[ "Dogs", "Cats", "Sheep" ]
Since on arrays we have the ability to call join that will put all the items in array together but separated by whatever we pass to the join (in this case we have ", " it will separate by a comma and a space)
In the end we have:
Dogs, Cats, Sheep