JS showcase of object literals and their corresponding properties

Just starting out with Javascript and eager to learn about arrays of objects. I'm currently exploring how to display an object along with its properties. Here's an example showcasing the colors of different fruits:

var fruitColor = {'apples':'red', 'bananas':'yellow', 'grapes':'purple'};


//expected output would be a string followed by the properties...
//"Color of fruit: apples - red, bananas - yellow, grapes - purple"

Answer №1

Here's an example:

let vehicleColor = {
                  'cars':'blue', 
                  'bikes':'green', 
                  'trucks':'black'
                  };
let statement="Color of vehicles: ";
for(let vehicle in vehicleColor){
    statement += vehicle + " - " + vehicleColor[vehicle] + ", ";
}
statement = statement.substring(0, statement.length - 2); 
// removing the last ','

Take a look at the for...in loop

https://jsfiddle.net/n0z13ge6/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Submitting a form using AJAX without specifying the form ID when there is a change

I have a unique setup on my page where a table is created with each cell acting as a form. The goal is for these forms to submit when the input value changes (onchange) without refreshing the entire page. An example scenario would be allowing users to ent ...

Voice crashes in Discord.js after the audio has been playing for a short while

Every time I try to play a song, the bot crashes and gives an "aborted" error message after about a minute. music = { "resource": createAudioResource(ytdl(parameters[0], {filter: "audioonly"}), {inputType: StreamType.Arbit ...

Is it possible to access a sub property using a dot string in Vue 3?

Given a Vue 3 proxy object structure as shown below: <script> export default { name: "test", data() { return { users: [{ "id": 1, "name": "Leanne Graham", " ...

Setting up jsdoc on a computer with slow internet access can be a bit tricky, but with

Recently, I have been working on some JavaScript code and utilized the sublime jsdoc plugin for commenting. Now, my goal is to generate documentation from these comments. The challenge lies in the fact that I am developing this JavaScript on a machine loca ...

In the event that you encounter various version formats during your work

Suppose I have a number in the format Example "1.0.0.0". If I want to increase it to the next version, it would be "1.0.0.1" By using the following regex code snippet, we can achieve this perfect result of incrementing the version to "1.0.0.1": let ver ...

Converting a TypeScript object into a JSON string

When working with TypeScript, I am facing a challenge while trying to initialize an object that requires a JSON string for the "options" parameter. Specifically, it pertains to the object mentioned here. It is crucial that the options parameter be in JSON ...

The Middleware does not catch Promise rejections that occur with await

I'm currently utilizing Nodejs in my project. One issue I am facing is with a promise that is requested after a delay. It seems like my Middleware is unable to catch the error, however, uncaughtException is able to handle it. router.all('/incas ...

What is the best way to initiate a loading event once the window has completely finished loading?

I am currently working with a framework (vue.js) that inserts images when there is a page change, without actually refreshing the entire page. When the page is loaded directly, I can implement a loading screen using the following code: loading = true; $(w ...

Traveling within a layered object

Currently, I'm working with an object and iterating through it to retrieve outputs as shown below: var obj = { "first": { "Bob": { "1": "foo", "2": "bar" }, "Jim": { "1": "baz" } }, "second": { "Bob": { ...

Adding a new document to an existing collection with an array field in MongoDB

Having an issue with adding a new chapter to my var array. Here is the code snippet in question: array.push({ chapter: [ { id: 2, title: 'adsf', content: &ap ...

Injecting a variable into JavaScript using CodeIgniter

I've encountered an issue where I am unable to pass a variable from Codeigniter's view to the controller and then to the model for executing the necessary query to retrieve data from the database. Below is a snippet from my Controller: public f ...

Guide to building a dual recursion menu in AngularJS using both functional and template methods

I'm currently working on developing a menu in AngularJS using template and functional recursion. The code I have written involves quite a bit of recursion, so I could really use some assistance. Below is the menu data represented in JSON format: var ...

Creating a custom function in JavaScript to interact with the `windows.external` object specifically for use

In my current project, I am facing an issue with JavaScript file compatibility across different browsers. Specifically, I have a JavaScript file that calls an external function (from a separate file) using windows.external, like this: windows.external.se ...

Nodejs encountering error message during file download captured by a developer

I am attempting to download a file from nodejs. If there is an error on the backend, I need to display a message on the front end. The issue is that I cannot seem to capture that message. I suspect there may be some issues related to using blob and json ...

The Google Docs viewer is displaying an empty screen

I have been utilizing the Google Docs viewer on my website: <div class="embed-r embed-responsive-a"> <iframe class="embed-responsive-it" src="https://docs.google.com/viewer?embedded=true&amp;url=http://LINK.PDF"></iframe> </div& ...

The timing of the JavaScript dialog with the AJAX call is off-kilter

Encountering an issue with a JavaScript script designed to showcase a JQUERY dialog box based on a C# ViewModel. Within a repeater, there is an ASP drop-down menu displaying 'Registration Date' details. The objective is for the JavaScript dialog ...

The use of '-' in v-bind:style within Vue.js

I'm having trouble figuring out how to use CSS code with dashes in v-bind:style. When I attempt something like this: <DIV style="width:100px;height: 100px;background-color: red;cursor: pointer;" v-bind:style="{ margin-left: margin + 'px' ...

Updating elements in a React array without causing rerendering of other elements in the array

Can you update only one element in an array without causing others to rerender? For example: Say you have an array of 500 <Card> components and want to modify <Card> number 27 (which updates the properties of the array). Is it possible to rere ...

What is the process for inputting data into a Inertia component?

I have a simple component: <script setup> import {ref} from 'vue' const labels = [] </script> <template> <div v-for="(label, index) in labels" :key="index" v-html="label"></div> </t ...

Choose all the inputs with the value attribute specified

How can I select all input textboxes in my form that have the required class and no value using jQuery? Currently, I am using: $('input[value=""]', '.required') The issue I am facing is that even when a user enters a value in the text ...