How to get all indexes of json file

user_16202161 0
Viewed 137

I would like to make random background images. For example, when burger selected from the picker, pictures will be shown inside of this json file. But first i need to reach all indexes of data, could you please help me how to do it?

const data = {
  "1": {
    name: "Burger",
    price: 599,
    picture: [
       {
       "description": "Tasty",
       "file": "https://cdn.auth0.com/blog/whatabyte/burger-sm.png"
       },
       {
       "description": "Beef",
       "file": "https://cdn.auth0.com/blog/whatabyte/burger-sm.png"
       }
    ]
  },
  "2": {
    name: "Pizza",
    price: 299,
    picture: [
       {
       "description": "Cheesy",
       "file": "https://cdn.auth0.com/blog/whatabyte/pizza-sm.png"
       },
       {
       "description": "Salty",
       "file": "https://cdn.auth0.com/blog/whatabyte/pizza-sm.png"
       }
    ]
  },
  "3": {
    name: "Tea",
    price: 199,
    picture: [
       {
       "description": "Informative",
       "file": "https://cdn.auth0.com/blog/whatabyte/tea-sm.png"
       }
    ]
  }
};
json javascript
3 Answers

Acess to both Keys and Values from data to use in the picker use Object.entries()

for (const [key, value] of Object.entries(data)){
  console.log(key)//?you can access the key (which you referred to as index
}

Use Case: Loading values inside the picker dynamically

Example in a react

<select onchange={handler}>    
  {Object.entries(obj)?.map(([key, value]) => (
     <option key={key}> {value?.name}</option>
   )}
</select>

For only accessing only Keys use Object.keys();

const keys = Object.keys(data)
user_148086580

You can make use of Object.keys.

const data = {
  "1": {
    name: "Burger",
    price: 599,
    picture: [
       {
       "description": "Tasty",
       "file": "https://cdn.auth0.com/blog/whatabyte/burger-sm.png"
       },
       {
       "description": "Beef",
       "file": "https://cdn.auth0.com/blog/whatabyte/burger-sm.png"
       }
    ]
  },
  "2": {
    name: "Pizza",
    price: 299,
    picture: [
       {
       "description": "Cheesy",
       "file": "https://cdn.auth0.com/blog/whatabyte/pizza-sm.png"
       },
       {
       "description": "Salty",
       "file": "https://cdn.auth0.com/blog/whatabyte/pizza-sm.png"
       }
    ]
  },
  "3": {
    name: "Tea",
    price: 199,
    picture: [
       {
       "description": "Informative",
       "file": "https://cdn.auth0.com/blog/whatabyte/tea-sm.png"
       }
    ]
  }
};

console.log(Object.keys(data));

Edit: In contrast to what your question says, I've also added a basic example.

const data = {
    "1": {
        name: "Burger",
        price: 599,
        picture: [{
                "description": "Tasty",
                "file": "https://cdn.auth0.com/blog/whatabyte/burger-sm.png"
            },
            {
                "description": "Beef",
                "file": "https://cdn.auth0.com/blog/whatabyte/burger-sm.png"
            }
        ]
    },
    "2": {
        name: "Pizza",
        price: 299,
        picture: [{
                "description": "Cheesy",
                "file": "https://cdn.auth0.com/blog/whatabyte/pizza-sm.png"
            },
            {
                "description": "Salty",
                "file": "https://cdn.auth0.com/blog/whatabyte/pizza-sm.png"
            }
        ]
    },
    "3": {
        name: "Tea",
        price: 199,
        picture: [{
            "description": "Informative",
            "file": "https://cdn.auth0.com/blog/whatabyte/tea-sm.png"
        }]
    }
};

function displayInfo(item) {
    document.querySelector('#item').textContent = `name: ${data[item].name}`;
    document.querySelector('#price').textContent = `price: ${data[item].price}$`;
    document.querySelector('#item-img').src = data[item].picture[0].file;
    document.querySelector('#item-img').title = data[item].picture[0].description;
}
<html>
  <head>
  </head>
  <body>
    <select onchange="displayInfo(this.value)">
      <option value disabled selected>-</option>
      <option value="1">Burger</option>
      <option value="2">Pizza</option>
      <option value="3">Tea</option>
    </select>
    <div>
      <p id="item"></p>
      <p id="price"></p>
      <img id="item-img" style="max-width: 100px; max-height: 100px;">
    </div>
  </body>
<html>

user_143716450

If it is a seperate file, you should use fetch to get the file Then parse it using JSON.parse

And then Object.keys to get the keys in the object.

async function getIndexes() {
    const response = await fetch('path/to/json/file.json');
    const json = JSON.parse(await response.json());
    return Object.keys(json);
}

or just use Object.keys if the object is already defined in the browser.

const data = {
  "1": {
    name: "Burger",
    price: 599,
    picture: [{
        "description": "Tasty",
        "file": "https://cdn.auth0.com/blog/whatabyte/burger-sm.png"
      },
      {
        "description": "Beef",
        "file": "https://cdn.auth0.com/blog/whatabyte/burger-sm.png"
      }
    ]
  },
  "2": {
    name: "Pizza",
    price: 299,
    picture: [{
        "description": "Cheesy",
        "file": "https://cdn.auth0.com/blog/whatabyte/pizza-sm.png"
      },
      {
        "description": "Salty",
        "file": "https://cdn.auth0.com/blog/whatabyte/pizza-sm.png"
      }
    ]
  },
  "3": {
    name: "Tea",
    price: 199,
    picture: [{
      "description": "Informative",
      "file": "https://cdn.auth0.com/blog/whatabyte/tea-sm.png"
    }]
  }
};
console.log(Object.keys(data));

user_153501390
Related