Extract information from JSON using a filter

Is there a way to extract the data value from the list without relying on index positions, considering that the order of arrays can change? I need to specifically target data where code === "size". Unfortunately, the existing structure cannot be modified. The only solution that comes to mind is using filter, but it requires indexing which is not feasible.

The desired result should be 100 150

[
  [
    "color",
    {
      "name": "Цвет",
      "code": "color",
      "list": [
        {
          "value": "Зеленый"
        },
        {
          "value": "Красный"
        }
      ]
    }
  ],
  [
    "size",
    {
      "name": "Размер",
      "code": "size",
      "list": [
        {
          "value": "100"
        },
        {
          "value": "150"
        }
      ]
    }
  ]
]
javascriptvue.js

Answer №1

Although this data structure may not be optimal, a quick solution could involve the following code snippet:

 const data = [
    
      [
        "color",
        {
          "name": "Color",
          "code": "color",
          "list": [
            {
              "value": "Green"
            },
            {
              "value": "Red"
            }
          ]
        }
      ],
      [
        "size",
        {
          "name": "Size",
          "code": "size",
          "list": [
            {
              "value": "100"
            },
            {
              "value": "150"
            }
          ]
        }
      ]
    ]
    
    const size = data.filter(element => element[1].code === 'size')[0][1].list.map(element => element.value)
    
    console.log(size)

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

Can you explain the distinction between these two Redux reducer scenarios?

While looking at someone else's code for a reducer, I noticed this snippet: export default function reducer(state, action) { switch(action.type) { case 'ADD_TODO': Object.assign({}, state, { ...

javascriptreactjsecmascript-6redux

Use AngularJS to take tab delimited text copied and pasted into a textarea, and then convert it into a table

One of the features in my app requires users to copy and paste tab delimited text. I need to convert this text into a table where each new column is represented by a tab and each new row is indicated by a new line. I've managed to create a list for e ...

javascriptangularjs

What is the best way to protect the information returned by my controller when creating a CRUD application in Laravel and vue.js?

Currently, I have developed a CRUD application in Laravel that utilizes Vue.js and Axios. The CRUD functionalities have been successfully implemented using routes that fetch data from my controller. However, one concern arises when exposing these routes pu ...

mysqllaravelvue.jsaxios

What is the method for determining the size of a WeakMap?

I am working with a WeakMap that looks like the following: let newObj = new WeakMap(); let key1={"a":1}; let key2={"b":2}; let key3={"c":3}; newObj.set(key1,"value1"); newObj.set(key2,"value2"); newObj.set( ...

javascript

Having trouble with AngularJs 1 functionality?

Having trouble fetching data from a JSON file. I've tried all available options, but nothing seems to be working. Not sure if I need to import something else. The JSON file is located at the same level as the index file. Any help would be much appreci ...

javascriptangularjsjson

Can you explain the distinction between "javascript:;" and "javascript:" when used in the href attribute?

Can you explain the distinction between using "javascript:;" and just "javascript:" within an anchor tag's href attribute? ...

javascripthtml

Is it possible for me to use an NPX tool to execute git clone command?

I am currently working on developing a personalized NPX tool that will install my custom npm package onto a locally hosted server. At the moment, I have a layout template that I want other users to replicate when they run my NPX command. Here is an exampl ...

javascriptnpmnpx

Differences between Mongoose's updateOne and save functions

When it comes to updating document records in a MongoDB database, there are several approaches to consider. One method involves defining the User model and then locating the specific user before making modifications and saving using the save() method: let ...

javascriptmongodbmongoose

Vuejs app experiencing issues with finally() function not functioning properly

After completing a tutorial on this, I decided to implement what I learned. The tutorial showed me how to run a VueJS app successfully and use axios.then.catch.finally or this.form.then.catch.finally. However, when I added npm to my old project that had ...

laravel-5vue.jsaxios

Having trouble generating an image with JavaScript

I am currently working on incorporating an image onto a webpage using JavaScript. Surprisingly, even the alert('This function works!') is not displaying anything! What could be causing this issue? Please assist! <!DOCTYPE html> <html> ...

javascripthtml

Personalized AngularJS required text

After utilizing the built-in AngularJS directive required and encountering a validation error, I receive a small popup near the field displaying "Please fill out this field". My issue lies in needing the text to be displayed in another language. How should ...

javascripthtmlangularjsangularjs-directiverequired

A guide on sorting JSON data with Javascript/jquery

I have a set of JSON data: {"X1":"3","X2":"34","Y1":"23","Y2":"23","Z1":"234","Z2":"43",...} My goal is to rearrange and group this data as follows: var newDataJson1 = { "X":{"X1":"3","X2":34}, "Y":{"Y1":"23","Y2":"23"}, ... } ALSO, I want to stru ...

javascriptjqueryjsongrouping

Is it possible to simultaneously send a JSON object and render a template using NodeJS and AngularJS?

I'm currently facing issues with my API setup using NodeJS, ExpressJS Routing, and AngularJS. My goal is to render a template (ejs) while also sending a JSON object simultaneously. In the index.js file within my routes folder, I have the following s ...

javascriptangularjsnode.jsajaxexpress

Tips for sending API requests as an object rather than an array

Hello there! I'm having trouble posting the data as an object. I attempted to adjust the server code, but it keeps throwing errors. Here is a snippet of the server code: const projectData = []; /* Other server setup code */ // GET route app.get(&a ...

javascriptnode.jsexpressservernodes

Is it possible to integrate Vue.js within a web component?

Is it possible to utilize VueJS to control behavior within a web component? In other words, if the VueJS library is included as a script reference, can it be integrated in the same way as on a standard HTML page, but within the confines of a web componen ...

javascriptvue.jsweb-component

Children components in Vue.js are receiving an undefined props object

Within my application, I am working with a parent and child component. The parent component directly includes the child component, which needs to access data from the parent. This data is fetched from a REST API within the parent component. However, when t ...

javascriptvue.jsparent-childvue-props

Modal failing to update with latest information

My webpage dynamically loads data from a database and presents it in divs, each with a "View" button that triggers the method onclick="getdetails(this)". This method successfully creates a modal with the corresponding data. function getdetails(par) { ...

javascriptjqueryasp.netajaxtwitter-bootstrap

Is it possible to turn off ajax within an iframe?

I'm currently developing a project that allows users to customize their page. What is the best way to prevent ajax functionality without having to disable javascript in an iframe? ...

javascriptajax

Scroll bar displayed on a non-editable text box

The TextArea is currently set to readonly mode using "ng-readonly," which is causing the scrollbar-thumb not to appear. It's important to note that I am not utilizing webkit in this scenario. Below is the HTML code being used: <textarea dataitemfq ...

javascripthtmlcss

Combining items in JavaScript using a shared key

Is there a way to combine 4 separate arrays of objects into one big object based on the keys inside an object? For example: OUTPUT: What I want to achieve. [ { "bugId": "", "testerId": "", "firstName": "", "lastName": "", "country": " ...

javascriptjsonecmascript-6lodash