Changing JSON into an array with typescript

I have encountered a JSON structure that is causing me some trouble:

 const help = [
      {
        "en": [
          {
            "test2": [
              {
                "title": "Naslov1",
                "subtitle": "Podnaslov1",
                "answers": [
                  {
                    "answer": "Odgovor 11"
                  },
                  {
                    "answer": "Odgovor 12"
                  }
                ]
              }
            ],
            "test1": [
              {
                "title": "Naslov2",
                "subtitle": "Podnaslov2",
                "answers": [
                  {
                    "answer": "Odgovor 21"
                  },
                  {
                    "answer": "Odgovor 22"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]

My goal is to filter this JSON by certain properties, specifically en and test2. The desired object structure I am aiming for is:

const newArray =  [ {
                    "title": "Naslov1",
                    "subtitle": "Podnaslov1",
                    "answers": [
                      {
                        "answer": "Odgovor 11"
                      },
                      {
                        "answer": "Odgovor 12"
                      }
                    ]
                  }]

I attempted to access the data using help.en.test2, but encountered an error: TypeError: Cannot read property 'test2' of undefined

If anyone has any insights on how I can properly remap this JSON, I would greatly appreciate the help. Thank you!

Answer №1

Remember to access your data using help[0].en[0].test2, since help and en are arrays and your desired data is located at index 0.

Answer №2

Give it a shot: help[0].en[0].test2

Answer №3

Many questions similar to this one can be found on Stack Overflow. If you're struggling to understand the structure of certain JSON data, utilizing the Chrome Developer Console can be beneficial. By pasting your code into the console, you can experiment with test.

Upon initial inspection, it appears that help is an array. Therefore, accessing help.en will result in undefined, and you should instead use help[0].en.

Further analysis reveals that en is also an array. Consequently, trying to access help[0].en.test2 will yield undefined, necessitating the use of help[0].en[0].test2.

Keep in mind that even help[0].en[0].test2 is an array itself...

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

Is there a way to extract the HTML source code of a website using jQuery or JavaScript similar to PHP's file_get_contents function?

Can this be achieved without a server? $.get("http://xxxxx.com", function (data) { alert(data); }); I have tried the above code but it seems to not display any output. ...

Unable to access attributes of null (reading 'title) and other information

When the parameter 'edit=true' is present, I expect a form with pre-filled data to render; otherwise, redirect me. However, I am encountering an issue where I keep getting redirected and receiving a console error stating 'Cannot read propert ...

Vue: update data and trigger function upon completion of animation transformation, utilizing animation transformation completion listener

Check out this straightforward Vue example: https://codesandbox.io/s/sleepy-haze-cstnc2?file=/src/App.vue https://i.stack.imgur.com/zboCb.png Whenever I click on the square, it not only changes color but also expands to 200% of its original size with a 3 ...

Utilize a JSON object within a PUT request for a RESTful service

I'm currently in the process of setting up a RESTful Service in Java that is able to accept a JSON Object via a PUT request and automatically map it to a Java Object. I've successfully accomplished this using XML, but I'm facing challenges w ...

What is causing the duplication of leaves when using this DFS implementation?

I created an algorithm to compare if two trees have the same leaves. https://i.sstatic.net/lpO2C.png Both trees display matching leaf numbers in the exact order, resulting in a true outcome. Below is the code that I formulated: function leafSimilar(root ...

Integrating a neighborhood library with an Angular 5 Project

I want to have a local library that can reflect changes in the project using it. I have cloned the library from this link on my local machine: https://github.com/manfredsteyer/angular-oauth2-oidc Currently, I am navigating to the library directory and run ...

Steps to assign a default value to the KeyboardTimePicker

I am utilizing the KeyboardTimePicker component from material ui to fetch a time of service such as "10:20". How can I make this time ("10:20") the default selection? When attempting to set this time, I am receiving an error stating " ...

What are some tips for increasing your points on the journey using Here Maps?

While plotting a route, I noticed that the segments on highways are quite far apart. Is there a way to get a more detailed routing with finer points along the journey? $.ajax({ url: 'https://route.cit.api.here.com/routing/7.2/calculateroute ...

PHP code to generate a JSON file with a multi-dimensional array: "

Within my web application, I am utilizing JSON. It is necessary for me to generate the following JSON file format using PHP. { "title": "A fantastic article", "clicks": 4000, "children": null, "published": true, "comments": [ ...

What is the best way to handle a select input that may have varying options in

I'm struggling to figure out how to make each select input independent of each other when rendering them through a map function. How can I correctly implement this, especially considering that the data will be coming from a redux store in the future? ...

Prevent selecting dates beyond the current date in Formly Datepicker within Angular

How can I disable future dates in Formly with Material datepicker in Angular? Despite searching online, I am unable to find a solution! export class AppComponent { form = new FormGroup({}); model: any = {}; options: FormlyFormOptions = {}; fields: ...

Is it possible to import a custom module after an Angular 2 app has been bootstrapped?

I'm currently in the process of developing a business web application using Angular2 that is based on a web API. But I've encountered a challenge. My goal is to bootstrap my Angular2 app using AuthModule, which is a custom module I have created. ...

Unable to generate a fresh database entry through form submission

I have designed User and Pairings models as shown below: class User < ActiveRecord::Base enum role: [:student, :supervisor, :admin] has_many :students, class_name: "User", foreign_key: "supervisor_id" belongs_to :supervisor, ...

Vue.js: crafting a universal composable is proving challenging

I am faced with the challenge of making a universal composable. In my scenario, I have 3 components - ItemSwiper, ItemCard, and ViewRecipeDetail. ItemSwiper contains card slides and serves as the parent of ItemCard. The loop of recipes in ItemSwiper loo ...

The async module has already been invoked with a callback function

Below is an array that I am working with: var files = [ { name: 'myfile.txt' }, { name: 'myfile2.txt' } ]; My goal is to access these objects asynchronously and send them for extraction, as shown below: Extraction function: ...

Personalized VueJS Counter

Just started learning VueJS and I've encountered a challenge while attempting to build a custom counter. Here is the code snippet: <template v-for="(ben, i) in plan.beneficios"> <div class="w-80 w-90-480 m-auto pa-hor-5-480" :class= ...

Submitting data to a URL using C#

How do I use C# code to post the following information to the website "http://restapi.adequateshop.com/api/Tourist"? tourist_name: "dummy" tourist_email: "[email protected]" tourist_location: "Paris" static void Main(string[ ...

Having trouble updating the route with the $location service, even after attempting to use $scope.apply

After trying to utilize the location service with no success, I am left wondering why my view isn't changing even after using either $scope.$apply() or $scope.apply. Prior to posting my question, I conducted thorough research on similar inquiries but ...

Is it possible to dynamically create an interface using an enum in TypeScript through programmatically means?

Recently, I defined an enum as shown below: enum EventType { JOB, JOB_EXECUTION, JOB_GROUP } Now, I am in need of creating an interface structure like this: interface EventConfigurations { JOB: { Enabled?: boolean; }; JOB_EXECUTION: { ...

Exploring the behavior of Object.assign in for loops and forEach loops

I've come across an interesting anomaly with Object.assign in the following scenario. function sampleFunction(index, myList) { myList.forEach((element, i) => { if (i === index) { console.log(Object.assign({}, {"newKey": " ...