Ways to extract a nested array from a JSON structure

"data": {
    "master": {
        "chicken": [
            {
                "productId": 6,
                "productName": "Test prod",
                "productIsSpecial": 1,
                "restaurantId": 1,
                "categoryId": 3,
                "categoryName": "chicken",
                "productImage": "2021-08-18T21:16:11.197586800_category.jpg",
                "productRating": 5.0,
                "productPrice": 10.0,
                "productEnabled": 1
            },
          
        ],
        "wheat beer": [
            {
                "productId": 1,
                "productName": "Non-Veg pizza",
                "productIsSpecial": 1,
                "restaurantId": 1,
                "categoryId": 1,
                "categoryName": "wheat beer",
                "productImage": "2021-08-22T17:24:02.969600500_category.jpg",
                "productRating": 5.0,
                "productPrice": 200.0,
                "productEnabled": 1
            },
         
        ]
    },

I encountered this JSON response and I aim to exhibit all the products with their respective category array in my project using vue3 as my front-end js framework. My initial attempt with result.data.data.master only unveiled data inside the category array without indicating the actual array name.

My goal is to showcase the category name along with the product list. How can I achieve displaying "chicken" as a cat name above the product list?

Edit: To clarify, I want to present a list of products categorized under each specific category. Currently, the category in question is chicken[] and I am successfully retrieving that category's product list:

"chicken": [
  {
    "productId": 6,
    "productName": "Test prod",
    "productIsSpecial": 1,
    "restaurantId": 1,
    "categoryId": 3,
    "categoryName": "chicken",
  },
],

Given this scenario, how can I specifically display chicken as a category name prior to listing the products within it?

javascriptjsonvue.js

Answer №1

The optimal solution involves transforming the object using this method: Instead of loading data, let's say you have a function loadData and you wish to store the retrieved information in results. You can achieve this by following these steps.

loadData() {
    axios.get("yourAPIendpoint.com").then((data) => {
      this.results = Object.entries(data.data.master).map(([name, value]) => ({
        name,
        value,
      }));
    });
  },

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

Tips for managing image uploads while incorporating pre-set error detection into a form

I'm facing a challenge with integrating an optional image upload feature into my express app. The issue seems to be related to the way I've structured the app, as it appears to be trying to pass the image name from the body instead of utilizing t ...

javascriptnode.jsrestexpress

Encountering an incorrect number of parameters for "undefined" during the deployment of a smart contract

I am facing an issue while attempting to deploy my first Voting contract on the testRPC. The error seems to arise from the arguments parameter in the code snippet below. When I tried passing an empty array, it gave an error stating "Got 0 expected 1!". Si ...

javascriptnode.jsethereumsolidityweb3js

What is the best way to convert the information from a <SelectInput /> component or similar components into another language?

Within my React admin v3 application, When retrieving data from the servers for my entity, I receive a unique identifier called a slug. This slug is a special key that needs to be translated on the client side. Here is an example of my <CallMeBackCre ...

javascriptreactjsreact-admin

Establish a secure connection to MySQL through SSH tunneling with node-mysql

Is it feasible to establish a connection to the MySQL server using an SSH key instead of a password when utilizing the node-mysql npm package? ...

javascriptmysqlnode.jsnpm

Javascript Library Issue: "Implicitly Declared Type 'Any' Error"

I am currently in the process of developing a JavaScript library that will interact with an API. My goal is to create a module that can be easily published on npm and utilized across various frameworks such as Angular or React. Below is the code snippet fo ...

javascriptreactjsangulartypescriptnpm

Optimal technique for adding elements to the DOM using ngFor

My application features a websocket connected to an ngFor loop that populates data from approximately 100 records. Each entry in the list has a button with a click event attached, triggering the creation of a loading spinner via a 'div' element w ...

javascriptangulard3.jsngfor

Troubleshooting problem with mapping @RequestBody in Spring - uncovering unassigned values

Using a Spring Controller for converting JSON to Java using the @RequestBody annotation. Currently debugging the code and suspect that the JSON is not being mapped correctly to the entity. Curious to see what the non-mapped JSON looks like from Java's ...

javajsonspring

Tips for obtaining Karma coverage for handling if-else scenarios in a controller method with Mocha/Jasmine testing suite

Below is the controller method in question: function updateItem(itemList) { vm.selectedItem = ''; if(itemList !== null || itemList !== '' && itemList !== undefined){ if (itemList.firstName !== ...

javascriptangularjskarma-jasminekarma-mochakarma-coverage

Populate a JSON object with dynamic strings and arrays of strings

My current issue involves my lack of experience with JSON and JavaScript, as I am trying to dynamically build a JSON object and populate it with strings. Since the incoming strings are unsorted, I need the ability to create a string array. I have devised t ...

javascriptarraysjson

Guide on utilizing the reduce method with objects

I am attempting to use the reduce method on an object to create an HTML list const dropdownTemplate = (data) => { console.log(data); // no data displayed return ` <li class="dropdown__item" data-value="${data.value}"><span class="dropdown__i ...

javascriptobjectreduce

Is it possible to integrate AngularJS with jQuery bootgrid?

Despite spending two full days delving into jQuery Bootgrid and AngularJS documentation, I am still struggling to implement angular directives on my dynamically generated grid. My setup involves AngularJS 1.6.6 and jQuery Bootgrid 1.3.1. The page itself i ...

javascriptjqueryangularjsjquery-bootgrid

"I am sending a JSON object to a PHP script and extracting the

I have created a form with PHP like this: <?php include '../db/baza.php'; ?> <?php include 'vrh.php' ?> <div id="page"> <div id="pageFrame"> <form action="up ...

javascriptphpmysqlajaxjson

Having trouble with VueJS project not updating after creating a new Docker Image?

What's the deal: I'm currently diving into Docker and decided to work on a small project to learn the ropes. I have a straightforward VueJs Frontend and a basic Python API set up. I successfully created a Docker Volume with 2 containers (1 for t ...

dockervue.jsnpmdocker-composedockerfile

Sending a JavaScript array to an MVC controller in .NET 5.0 via a POST request

Trying to send data from a JavaScript array to an MVC controller. While debugging, I end up in the method public void GetJSArray(List<SelectorModel> selectorModels) However, the selectorModels is currently showing as null. Below is the model being ...

javascriptc#ajaxmodel-view-controller

Collaborating on React components across multiple projects while maintaining the central source code in one repository

I need a solution to effectively share React components, their Flow types, and SCSS between two projects while maintaining the source code in one project. The second project should only have read-only access to these components from the other project. Unf ...

javascriptreactjsnpm

Issue with AngularJS UI not refreshing after successful $.ajax call

Recently delving into AngularJS, I decided to tweak the example found at this link. In my modifications, I introduced a new payment service within the example to invoke a Json method on my server. While the backend functionality works smoothly, I encounte ...

javascriptjqueryjsonangularjs

How can I identify the nearest ancestor based on a specific class in Angular 8?

In order to achieve a specific goal, let's imagine this scenario: Object A Object B Object C Object D Object D represents my angular component. It is important for me to adjust its height based on the heights of Object A and Object B. Regardle ...

javascriptangularselectorangular-directiveangular8

Having trouble turning off a multi-select drop down option

Hello, I'm a newcomer to AngularJs and facing an issue with disabling my multiselect dropdown under a specific condition. Initially, I attempted to disable the dropdown using the following code: document.getElementById("multidropdown").disabled = tr ...

javascripthtmlangularjsdrop-down-menu

Having trouble uploading an image with Angular's HttpClient

Uploading an image using native fetch POST method works perfectly: let formData = new FormData(); formData.append('file', event.target.files[0]); console.log(event.target.files[0]); fetch('http://localhost:8080/file/ ...

javascriptangularhttp

What is the best way to exclude certain values from Objects in Javascript?

Imagine having an object structured like this: "errors": { "name": { "name": "ValidatorError", "message": "Minimum length 6 characters.", "propert ...

javascriptnode.jsexpressecmascript-6