Exploring the initial output in JavaScript

I'm attempting to include the following body in JSON format. However, it seems that only one value is being added.

json = { "Myname":"Nate",  }

Here is the code I'm trying to add:

Body = Myproperty: [{
  "vehicle": "car",
  "color": "Red"
}, {
  "name": "van",
  "color": "white"
}, {
  "name": "Truck",
  "color": "Blue"
}]

This is the code snippet I am using:

for (var i = 0; i < Myproperty.length; i++) {
  json.mycarname = Body.Myproperty[i].name;
  json.mycolor = Body.Myproperty[i].color;
}

The expected outcome should be as follows:

{
  "Myname": "Nate",
  mycarname: "car",
  "mycolor": "Red"
},
{
  "Myname": "Nate",
  mycarname: "van",
  "mycolor": "white"
},
{
  "Myname": "Nate",
  mycarname: "Truck",
  "mycolor": "Blue"
}

Answer №1

If you're trying to achieve something similar to this:

let myName = "Jack";

let Vehicles = [{
    "name": "bike",
    "color": "Green"
  },
  {
    "name": "bus",
    "color": "Yellow"
  },
  {
    "name": "SUV",
    "color": "Black"
  }
]

let vehicleDetails = [];
for (let i = 0; i < Vehicles.length; i++) {
  vehicleDetails.push({
    "OwnerName": myName,
    "VehicleName": Vehicles[i].name,
    "VehicleColor": Vehicles[i].color
  });
}

console.log(vehicleDetails)

The concept here is to iterate through the data you wish to include and append them to the vehicleDetails array.

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

Master the Art of Animating Letters in the DOM by Navigating Through Any Array of Characters

I am attempting to implement a typewriter effect animation where a new message is displayed and animated as I type into an input box. Initially, I tried using a global char variable to iterate through each element of the array. However, whenever I passed ...

What is the method for generating a JSON array in Python?

Looking to create an array structured like this, { "driver_details":[ { "dr_id": 1, "v_id": 2, "v_type":"car", "condition":"ok" }, { "dr_id": 2, "v_id": 3, "v_type":"cab", ...

Synchronizing Vuetify Carousel with dynamic route parameters

I'm facing an issue where the v-carousel value does not sync correctly with a route parameter using a computed property. Despite waiting for the mounted hook, the carousel seems to emit its own input and disregard the initial value from the route para ...

The error message "TypeError: event.preventDefault is not a function when using Formcarry with React Hook Form" is

How do I implement form validation using React Hook Form and Formcarry together? Something seems to be missing in my code or there might be a logic error Take a look at my code snippet: import { useForm } from "react-hook-form"; import { useFor ...

Struggling to make a click function function properly using ajax and php

Here is the code I am working with. I have successfully queried the database and displayed the results in JSON format at the top of the page. Now, I am trying to use a click function to display them again when a button is clicked later on the page, but I ...

Issue with PHP $_GET function not functioning properly in conjunction with JQuery Mobile

I am currently developing an application using a combination of JQuery Mobile and PHP. The issue at hand is as follows: I am encountering difficulties when attempting to transfer values between different pages in my JQuery mobile app (for example, from #p ...

Retrieving live comments from YouTube streams for a customized React application

Currently working on developing a React Webapp to organize and showcase superchats during a live stream. My initial attempt involved utilizing the YouTube LiveChat API, but I hit a roadblock as it requires authentication from the live stream owner, which ...

Tips for locating the highest number in JavaScript

I'm having trouble with my code where the first number, even if it's the largest, is not displaying as such. Instead, it shows the second largest number. Even when following suggestions, I encountered an issue where if the numbers are entered as ...

Using JQuery, a button is programmed to take a URL and then proceed to submit

My application is designed to shorten URLs for users who are authenticated. The form only requires the full URL input, and it will then generate a shortened version of the link. I am interested in creating a button that can be embedded on pages with long, ...

Tips for saving images that are loaded indirectly on websites

Is there a way to save images that are loaded using methods other than being embedded directly in web pages or stored in a temp folder or browser cache? You can check out the situation I am referring to here. Any tips on saving images from the gallery on ...

Utilizing JQuery for Asynchronous Post Requests in C#

Having some trouble retrieving a JSON Object in C#. I've posted my JavaScript code here, but I can't seem to handle it in the codebehind. Any tips or suggestions would be greatly appreciated! $.ajax({ type: "POST", url: "facebook ...

Tips for compressing JSON data in ColdFusion

We are currently experiencing issues when posting a JSON string to the Netsuite ERP platform using cfhttp. We have noticed that we are receiving numerous errors, most of which relate to unterminated string literals. Despite confirming the correctness of ou ...

Explaining Vue.js actions and mutations in detail

Can someone help clarify the relationship between these functions for me? I'm currently learning about Vue.js and came across an action that commits a mutation. The Action: updateUser({commit}, user) { commit('setUser', {userId: user[&ap ...

Having trouble interacting with Bootstrap modal dialog when fullPage.js is active

Whenever I attempt to click on the button, a Bootstrap modal dialog box appears but remains unresponsive no matter what I try. My project utilizes both Bootstrap and fullPage.js http://codepen.io/anon/pen/obEOzO <body> <div id="fullpage"> &l ...

Is there a minimum height restriction for v-select in Vuetify.js?

Looking at the code snippet provided below, I am facing an issue while trying to decrease the height of a v-select element. It seems like there is a minimum limit set for the height, as reducing it beyond height = 40 doesn't have any effect. Is there ...

Displaying various charts in a single view without the need for scrolling in HTML

How can I display the first chart larger and all subsequent charts together in one window without requiring scrolling? This will eventually be viewed on a larger screen where everything will fit perfectly. Any recommendations on how to achieve this? Here ...

Converting JSON to XML using XSLT 3.0, including JSON that incorporates HTML formatting

I am working with a Json file that contains HTML markup within it. { "process": "Test", "title": "Json2XML_Conversion", "content": "<div id=\"contents\"><p class=\&quo ...

Building an Angular 4 universal application using @angular/cli and integrating third-party libraries/components for compilation

While attempting to incorporate server side rendering using angular universal, I referenced a post on implementing an angular-4-universal-app-with-angular-cli and also looked at the cli-universal-demo project. However, I ran into the following issue: Upon ...

Ways to retrieve base64 encoded information from an image within an HTML document

On my registration form, users have the option to select an avatar from 2 choices: Select a default avatar Upload their own custom avatar This is how I have implemented it in my HTML page. <img id="preview" src="img/default_1.png"> The chosen av ...

When I click the back button on my mouse in React, it returns JSON data instead of HTML and CSS

I am working on a web application with two pages: a menu and orders. When I navigate from the orders page to the menu page and click the back button, I receive JSON data instead of the HTML page. The data loads correctly, but the page does not display the ...