How do I get property value without knowing it's specific key in javascript using JSON

Question

I'm trying to work on a project at school and I'm stuck displaying to-do lists one in another, meaning, I'm trying to make a web app based on localStorage and JSON, using HTML, CSS, and JS. I have the following JSON Object and I wish to display the list in the list, the to-do lists inside cards defining what's what.

var listStorage = {
"lists":[{
  "pierre": ["Do the laundry", "Pick up James from school", "Call Charlie"]
},{
  "michal": ["Go to the Mall", "Eat ice-cream", "Launch my new APP"]
}]};

Now what I need to do is getting to the name of the lists (pierre,michal) and display them in two different divs, and then get to the value inside (Do the laundry..) and display them under each name. that's what I did to get each list name:

for (var j = 0; j < listStorage.lists.length;j++){
  $('body').append($('div'));
  $('div').append(listStorage.lists[j]);
}

But the second function for getting each item in each list array is not working for me in any way. Can anyone help me get it? Please note the list names are unknown strings that each user enters and it's added to the localStorage. Please feel free to ask me anything if there's anything unclear, this is my first time asking here.

Does each object in the `lists` array only ever contain one property (and associated value), as in your example? — CertainPerformance, Aug 25 '18 at 08:59
@CertainPerformance If it would be only one property, then we can do Object.keys() on it and always get field on [0]th index — Meet Zaveri, Aug 25 '18 at 09:01
Possible duplicate of [Get array of object's keys](https://stackoverflow.com/q/8763125/7362396) - Both solutions (`for (.. in listStorage.lists)` / `Object.keys(listStorage.lists)`) should do. — Tobias K., Aug 25 '18 at 09:02
@MeetZaveri Can you please show me how? I tried that but that never worked for me — Pierre Janineh, Aug 25 '18 at 09:03
@TobiasK that's about an only object, I'm trying to get an array in an object — Pierre Janineh, Aug 25 '18 at 09:04

score 1 · Accepted Answer · answered Aug 25 '18 at 09:08

You can do

// Get lists from localstorage
lists = [{
  "pierre": ["Do the laundry", "Pick up James from school", "Call Charlie"]
},{
  "michal": ["Go to the Mall", "Eat ice-cream", "Launch my new APP"]
}];

lists.forEach(list => {
  Object.keys(list).forEach(listName => {
    // Display todo list
    console.log(listName);
    console.log(list[listName]);
  })
})

But I wouldnt recommend doing this.

A better solution is to standardize the shape of your list objects:

// Get lists from localstorage
lists = [
  {
    "owner": "Pierre",
    "tasks": ["Do the laundry", "Pick up James from school", "Call Charlie"]
  },
  {
    "owner": "Michal",
    "tasks": ["Go to the Mall", "Eat ice-cream", "Launch my new APP"]
  }
];

lists.forEach(list => {
  // Display todo list
  console.log(list.owner);
  console.log(list.tasks);
})

I tried the second method you suggested, it returned (lists.forEach is not a function), is there something I'm doing wrong? — Pierre Janineh, Aug 25 '18 at 09:30

Meet Zaveri · Answer 2 · 2018-11-04T13:02:34.180

Solution

According to as per discussion that there will be only one property in object for array of objects.

Okay if you have always only one property in object, then you can perform Object.keys() on it and get an array(suppose -> newKeysArray) of keys. So at 0th index of this newKeysArray, we can obtain value from the object.

var listStorage = {
 "lists":[{
   "pierre": ["Do the laundry", "Pick up James from school", "Call Charlie"]
 },{
   "michal": ["Go to the Mall", "Eat ice-cream", "Launch my new APP"]
 }]};
for (var j = 0; j < listStorage.lists.length;j++){
 // Using Object.keys() will give you an array of keys present in object not the values
 var newKeysArray = Object.keys(listStorage.lists[j]);
 // the final value you want as key's value
 console.log('final value',listStorage.lists[j][newKeysArray[0]]);
 $('body').append($('div'));
 $('div').append(listStorage.lists[j]);
}

Uncaught TypeError: Cannot read property '0' of undefined in (newKeysArray[0]) — Pierre Janineh, Aug 25 '18 at 09:12

score 0 · Answer 3 · answered Aug 25 '18 at 09:08

If, as your question shows, you only want to access the value of the (only) item in a list object, then you can use Object.values to access an array containing the object's values, from which you can extract the first (and only) value, which is the array:

var listStorage = {
"lists":[{
  "pierre": ["Do the laundry", "Pick up James from school", "Call Charlie"]
},{
  "michal": ["Go to the Mall", "Eat ice-cream", "Launch my new APP"]
}]};

listStorage.lists.forEach((obj) => {
  const arr = Object.values(obj)[0];
  const $div = $('<div></div>');
  $('body').append($div);
  arr.forEach(str => {
    $div.append('<div>' + str + '</div>');
  });
});

body > div {
  border: 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

If you wanted to get the key as well, use Object.entries:

var listStorage = {
"lists":[{
  "pierre": ["Do the laundry", "Pick up James from school", "Call Charlie"]
},{
  "michal": ["Go to the Mall", "Eat ice-cream", "Launch my new APP"]
}]};

listStorage.lists.forEach((obj) => {
  const [name, arr] = Object.entries(obj)[0];
  const $div = $('<div>' + name + '</div>');
  $('body').append($div);
  arr.forEach(str => {
    $div.append('<div>' + str + '</div>');
  });
});

body > div {
  border: 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

score 0 · Answer 4 · answered Aug 25 '18 at 09:13

First of all your datastructure is overly complicated, you either use one object as a hashtable:

 var listStorage = {
   lists:{
    "pierre": ["Do the laundry", "Pick up James from school", "Call Charlie"],
    "michal": ["Go to the Mall", "Eat ice-cream", "Launch my new APP"]
   }
 };

To go over all lists you can then just do:

  for(const [name, entries] of Object.entries(listStorage.lists)) {
   console.log(name); // pierre
   console.log(entries); // [Do the laundry, ...]
 }

Or you take an array with static properties, as:

 var listStorage = {
   "lists":[{
     name: "pierre",
     entries: ["Do the laundry", "Pick up James from school", "Call Charlie"],
    },{
     name: "michal",
     entries: ["Go to the Mall", "Eat ice-cream", "Launch my new APP "],
    }]
 };

That can be iterated as:

  for(const {name, entries} of listStorage.lists) {
    //...
  }

Now to append a new div, you have to create one first ($("div") gets all divs on the page, that wont work):

  const listDiv = $("<div></div>");

Then you can append that to the body and fill it with the content.

How do I get property value without knowing it's specific key in javascript using JSON

4 Answers4