Navigating through JSON data structures

Can anyone assist me with looping over an object that contains array values? I've been struggling with this for some time. My knowledge of JSON data structures is limited.

var storeProducts = {"items": [
 {
   "imgsrc": "https://cdn.shopify.com/s/files/1/0094/2252/products/M997ST_6940.progressive.jpg?v=1497039024",
   "productname": "New Balance",
   "productlistprice": "$240",
   "discounted": "false",
   "productprice": "",
 },
 {
   "imgsrc": "https://cdn.shopify.com/s/files/1/0094/2252/products/Peacoat_363758_02_6428.progressive.jpg?v=1496428432",
   "productname": "Puma Sneakers",
   "productlistprice": "$120",
   "discounted": "false",
   "productprice": "",
 },
 {
   "imgsrc": "https://cdn.shopify.com/s/files/1/0094/2252/products/Titan_Weave_WhiteBlueEstate_50117182901_C6501_5945-78.progressive.jpg?v=1494616290",
   "productname": "Diadora",
   "productlistprice": "$100",
   "discounted": "true",
   "productprice": "190",
 },
]};
javascriptarraysjsonsortingobject

Answer №1

@Arthur is correct.

Solution:

for( let index = 0; index < productList.length; index++ ) {
    let product = productList[index];
}

Answer №2

If you're looking to extract all the image URLs from a source, here's how you can go about it.

const imageURLs = productsList.map(item => item.imgSrc);

To retrieve the first URL in the array, simply use:

const firstImageURL = imageURLs[0];

const productsList = {
"items": [
 {
   "imgSrc": "https://cdn.shopify.com/s/files/1/0094/2252/products/M997ST_6940.progressive.jpg?v=1497039024",
   "productName": "New Balance",
   "listPrice": "$240",
   "isDiscounted": false,
   "price": "",
 },
 {
   "imgSrc": "https://cdn.shopify.com/s/files/1/0094/2252/products/Peacoat_363758_02_6428.progressive.jpg?v=1496428432",
   "productName": "Puma Sneakers",
   "listPrice": "$120",
   "isDiscounted": false,
   "price": "",
 },
 {
   "imgSrc": "https://cdn.shopify.com/s/files/1/0094/2252/products/Titan_Weave_WhiteBlueEstate_50117182901_C6501_5945-78.progressive.jpg?v=1494616290",
   "productName": "Diadora",
   "listPrice": "$100",
   "isDiscounted": true,
   "price": "190",
 },
]};

const imageURLs = productsList.items.map(item => item.imgSrc);
console.log(imageURLs);

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

Transform JSON attribute string into a JSON data structure

Here is a struct I am working with: type ResponseStatus struct { StatusCode int Message string Data string `json:"data"` } type Pets struct { Id int `json:"id"` Name string `json:"name"` Age int `json:"age"` ...

jsongo

I am having trouble retrieving images on my website and displaying URL images

Every time I attempt to retrieve an image URL from the database for the client, I encounter the following error: Refused to load the image 'https://nuclear-photos.s3-ap-southeast-1.amazonaws.com/…22:33:44%20GMT+0400%20(GST)TEST.png' because i ...

javascriptmeteoramazon-s3cross-domain

The function signature '(newValue: DateRange<dateFns>) => void' does not match the expected type '(date: DateRange<unknown>, keyboardInputValue?: string | undefined) => void' as per TypeScript rules

I'm currently utilizing the MUI date range picker from https://mui.com/x/react-date-pickers/date-range-picker/. Here's my code snippet: <StaticDateRangePickerStyled displayStaticWrapperAs="desktop" value={valu ...

javascripttypescriptmaterial-ui

Sending JavaScript objects from React.js to Node.js

I send the object to the backend (Node js) when making an API call, but I am logging the objects for verification. Initially, I used POSTMAN to check and it worked perfectly. However, when attempting to pass an object in the frontend (Reactjs), it appear ...

javascriptnode.jsreactjs

A comprehensive guide on associating a JavaScript function with an element attribute

I am looking for a way to assign a JavaScript function to an HTML attribute. For example: <li data-ng-repeat="job in jobList" class= dynamicClass(str) data-filter = "dynamicFilter(str)"> The reason I want to do this is because the class name and ...

javascriptjqueryhtmlcss

Sending POST Requests with Array Values to a JSON Server in IOS

I am working with an array structured like this: ( { itemId = 18; itemPrice = "90.00"; itemQuantity = 100; }, { itemId = 17; itemPrice = "88.00"; itemQuantity = 120; } ) My task is t ...

iosobjective-carraysjsondictionary

Utilizing jQuery AJAX to enable a functional back button feature upon modifying HTML

While there are numerous inquiries regarding jQuery and Back button issues, the focal point is typically on maintaining history features when using the browser back/forward buttons. One specific query I have is how to load an AJAX-affected HTML page when ...

javascriptjqueryajaxbrowserback

Can one monitor a Vuex module in real time?

I have a single module imported into the Vuex store: import date from './modules/date-select'; export default new Vuex.Store({ modules: {date}, }); Is it possible to "watch" for changes in the entire module within a component? For example: ...

javascriptvue.jsvuejs2vuex

Instructions for creating a slush machine

Today, I tried to create a slush generator but ran into some issues. Even after following tutorials online and double-checking my work, the generator doesn't seem to be functioning properly. If anyone can identify what I might have done wrong, please ...

javascriptnode.jsnpmgulp

Show a persistent header once you scroll past a certain point using Bootstrap

Utilizing Bootstrap affix property to reveal a header after scrolling down by 100px has been successful for me. However, I encountered an issue when trying to set the opacity property to 0.0001, it works as expected. But when setting it to 0 or changing di ...

javascripthtmlcsstwitter-bootstrap

Receive an odd array element

When I load a single data from the database, it appears as an array. However, I am unsure how to extract the value in label_values. Print_r($results): Array ( [custom_params] => custom_limit="0"|input_label="{\"label_values\":[\"\u ...

phparraysjson

Updating values dynamically using AJAX within a v-for loop

I'm struggling to figure out how to change the value of an attribute in a v-for loop. For instance, I would like the index to be used as the name of the related product: HTML <div v-for="(index, publication) in publications"> {{ index | nam ...

javascriptajaxhttpvue.js

Unusual actions exhibited by the jQuery inputs

My form has input fields where jQuery turns a specific input (the URL input) into a link. However, I have two URL inputs with HTML IDs url0 and url1. The issue arises when editing the first input (url0), as the second input (url1) becomes visible and any c ...

javascriptjquery

"Transitioning from jQuery to Vanilla Javascript: Mastering Scroll Animations

I'm seeking guidance on how to convert this jQuery code into pure Javascript. $('.revealedBox').each(function() { if ($(window).scrollTop() + $(window).height() > $(this).offset().top + $(this).outerHeight()) { $(this).addCla ...

javascriptjquerycss

Tips for adjusting the value of a textbox up and down

I am facing an issue with my booking flight form that is supposed to take input from users regarding the number of travelers. I have three textboxes for Adult, Children, and Infants respectively, along with a main textbox to display the final result. Howev ...

javascriptjqueryhtmlcss

Is there a way to extract a token from the URL in a Nextjs/React application?

I am currently developing a project that relies heavily on API integration. My front-end interface is built using React and Next.js, while the back-end API is developed with Laravel. Within my front-end page, I have implemented a token in the URL to help ...

javascriptreactjsnext.js

Having trouble displaying json data in an HTML file with d3.js

I am having trouble loading data from a json file into an HTML file and using D3 to visualize it. Even though the file loads correctly and is verified with a 200 status, the contents are interpreted as null. Below are the contents of the json file: [{"to ...

javascripthtmljsond3.jsbubble-chart

Generate a record with a valid timestamp - Mongoose

My goal is to input a date field in a MongoDB document. However, when I send the POST request to the API, the time in the created document differs from what I specified. Here is an example: { "serialnumber": "1234567", "date": "2019-08-30T10:32" } The re ...

javascriptnode.jsmongodbdatemongoose

What are some ways to verify the legitimacy of user input?

Is there a way to verify the validity of a user's input, specifically their email address and password, against a database? I want to retrieve the user's credentials from my website and authenticate them using my 'testlog' database. As ...

javascripthtmlreactjsbootstrap-4react-bootstrap

removing duplicate items from an array in Vue.js

I created a Pokemon App where users can add Pokemon to their 'pokedex'. The app takes a pokemon object from this.$store.state.pokemon and adds it to this.$store.state.pokedex. However, users can add the same pokemon multiple times to the pokedex, ...

javascriptvue.js