CODEWITHSUNDEEP
javascriptjson
Pierre Janineh
Pierre Janineh

Reputation: 702

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

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.

Upvotes: 0

Views: 93

Answers (4)

Meet Zaveri
Meet Zaveri

Reputation: 3059

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]);
}

Upvotes: 0

Jonas Wilms
Jonas Wilms

Reputation: 138267

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.

Upvotes: 0

Baboo
Baboo

Reputation: 4258

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);
})

Upvotes: 1

CertainPerformance
CertainPerformance

Reputation: 370729

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>

Upvotes: 0

Related Questions