Display JSON keys in console

Question

I am having trouble having the keys (“Apple iPhone 5S“, “Solio Mono Solar Charger“, “24 Month Warranty Package“) display in the console. (Basically, display each item with the price.)

I tried using JSON.parse(cart) and used:

var arr = Object.keys(cart.Item).map(function(k) { return cart.Item[k] });

but the console only displays this:

[[object Object] {
  price: 299.99,
  productId: 688,
  url: "http://website.com/phone_iphone5s.html"
}, [object Object] {
  price: 29.95,
  productId: 655,
  url: "http://website.com/solio_charger.html"
}, [object Object] {
  price: 129.95,
  productId: 681,
  url: "http://website.com/24_month_warranty.html"
}]

I did notice that "Item" is written as an object instead of an array. Should I be changing the object into an array so that the ".map" function works?

Here's my JSBin: JSBin

and my Code:

var arr = Object.keys(cart.Item).map(function(k) { return cart.Item[k] });
// var arrStr = JSON.parse(cart);

// console.log(arrStr);

console.log(arr);
function myCart(){ 
  var myLen = cart.Item.count;
  console.log("Items: " + cart.Items);
  for(var i=0; i<myLen; i++){
    console.log("- " + cart.Item[i] + " (" + cart.Item[i].price + ")");
  }
  console.log("Total: " + cart.Total);
};

myCart();

Here's the original question:

Given the following JSON object as an example:

cart = {
    "Items": 3,
    "Item": {
        "Apple iPhone 5S": {
            "productId": 688,
            "url": "http://website.com/phone_iphone5s.html",
            "price": 299.99
        },
        "Solio Mono Solar Charger": {
            "productId": 655,
            "url": "http://website.com/solio_charger.html",
            "price": 29.95
        },
        "24 Month Warranty Package": {
            "productId": 681,
            "url": "http://website.com/24_month_warranty.html",
            "price": 129.95
        }
    },
    "Total": 459.89
}

Write a JavaScript function that outputs the total number of items, each item with price, and the total value of the shopping cart in the browser console in the exact format as shown below. The least amount of code, the better.

Note: The JSON object is just an example. The code should work for ANY JSON object with the same structure so do not use hardcoded keys (“Apple iPhone 5S“, “Solio Mono Solar Charger“, “24 Month Warranty Package“).

RESULT:

Items: 3
- Apple iPhone 5S ($299.99)
- Solio Mono Solar Charger ($29.95)
- 24 Month Warranty Package ($129.95)
Total: 459.89

You can use JSON.stringify to output the whole json as string. — user1735921
– user1735921, Commented Aug 28, 2016 at 22:25

Adam Azad · Accepted Answer · 2016-08-28 22:06:19Z

This is not least, but you still need to at least 2 more lines for items in cart, and total. Use \r\n to create break lines.

var cart = {
    "Items": 3,
    "Item": {
        "Apple iPhone 5S": {
            "productId": 688,
            "url": "http://website.com/phone_iphone5s.html",
            "price": 299.99
        },
        "Solio Mono Solar Charger": {
            "productId": 655,
            "url": "http://website.com/solio_charger.html",
            "price": 29.95
        },
        "24 Month Warranty Package": {
            "productId": 681,
            "url": "http://website.com/24_month_warranty.html",
            "price": 129.95
        }
    },
    "Total": 459.89
},
cartInner = '';

// add total items;
cartInner += 'Items: '+ cart.Items;
// loop through items.
for(var item in cart.Item){
  cartInner += "\r\n"+'- '+ item + ' ($'+ cart.Item[item].price +')';
}
// add total
cartInner += "\r\n"+'Total: '+ cart.Total;
// ouput to console
console.log(cartInner);

Jecoms · Accepted Answer · 2016-08-28 21:56:12Z

1

Something like:

var arr = Object.keys(cart.Item).map(function(k) { 
    return k + " ($" + cart.Item[k].price + ")";
});

You were just outputting the object itself before. If you want to output a specific string with a certain format, you need to explicitly form the return to reflect that.

answered Aug 28, 2016 at 21:56

Jecoms

2,8784 gold badges25 silver badges34 bronze badges

1 Comment

Etep Over a year ago

Worked Perfectly Thanks!

Collectives™ on Stack Overflow

Display JSON keys in console

Here's the original question:

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Here's the original question:

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related