Issue with parsing JSON values in a Chrome extension

Struggling to retrieve the value of a JSON key, but it keeps returning empty.

Check out the code snippet below:

                    let json_=JSON.parse(JSON.stringify(result));
                    console.log(json_);
                    console.log(json_.tabs);
                    console.log(json_["tab"]);
                    console.log(json_['tab']);

Current output:

https://i.sstatic.net/x7lEF.png

View detailed output snapshot here:

https://i.sstatic.net/eiKvP.png

Answer №1

Alright, so the scenario is this: you have a variable called json_ which holds an object. When you execute console.log(json_);, the object is printed out with the following value:

{ MUA-S&S 2019...........1 : "{"alwaysOnTop"............................................382}"}

This means that within the json object, there is only one property named MUA-S&S 2019...........1 and the corresponding value for this key is

"{"alwaysOnTop............................................382}"
, which is a string. However, when attempting to access properties like:

console.log(json_.tabs) // undefined
console.log(json_["tab"]); // undefined
console.log(json_['tab']); // undefined

You will receive a value of undefined because your object does not contain any properties named tabs or tab.

Answer №2

Here is the answer :

const tabs = JSON.parse(results[Object.keys(data)[0]])['tabs'];

I found this solution at this website.

Additionally, you can check out my latest project and contribute if interested.

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

Transfer information from a Vue function to an external JSON document

I would like to store the data for my Vue project in an external JSON file instead of within the Vue function itself. I attempted to retrieve data from an external file using the code below, but encountered issues, possibly due to a conflict with the "ite ...

Comparison of passwords in Nodejs is hindered by Bcryptjs

Struggling to compare passwords using bcryptjs for JWT authentication. Unable to successfully verify the password during login to sign the token and send it to the client. Issue The problem arises when trying to use the .compare() method in bcryptjs and ...

When clicking to open the md-select on Angular Material 1.1.0, an unwanted [object object] is being appended

Every time I try to open the md-select input, an [object Object] (string) is added to the body tag. Click here to see the md-select input After clicking the md-select once, this is how the body looks ...

How does the interaction between Express and Angular for routing in the MEAN Stack function?

Currently, I am utilizing Express static to direct to the public directory. //app.js app.use(express.static( __dirname + '/public')); I am looking for a way to have most of the UI routing done by AngularJS. However, it seems that it only works ...

Having trouble resolving an error while attempting to incorporate an npm module into a vanilla JavaScript application

I admit my lack of expertise in building modern JavaScript apps is becoming evident. Currently, we have a Capacitor app that uses plain JavaScript without any build tools, and it functions well. Our goal is to incorporate Microsoft Code Push support throu ...

Suggestions for a JavaScript tool that automatically crops images

Is there a tool available, either browser-based or in Java, that can analyze an uploaded image, identify different characters within it, and crop them out into separate images? For instance, if this image contains three unique runic symbols, I would like ...

Capturing an image of an HTML5 canvas that includes an image object: tips and tricks

After creating a canvas and adding various objects like images, clipart, and text to it, I encountered an issue. When capturing a snapshot of the canvas with only text using the method `canvas.toDataURL()`, the snap is correct. However, when I include an i ...

How do I navigate to a different page in a Flask app after an ajax post depending on a condition detected in the view?

Within my flask application, I have a sales page where users can input information that is then saved to the database using an ajax post request. The twist is that there are only a limited number of consoles available for users to record their sales. If on ...

Using Node.js, Express.js, and Redis.io for efficient order processing

Currently, I am working on a project that involves Node.js with express.js and redis.io as the database. I have implemented a get resource with query parameters to retrieve the IDs of libraries containing a specific book. However, I am struggling to unders ...

Steps for displaying a bootstrap modal in alignment with the triggering button's position

Recently diving into the world of bootstrap and AngularJs has been quite the learning experience for me. One challenge I encountered was trying to implement a bootstrap modal dialog box to show additional details within a table column. My goal was to hav ...

Fixing the Bootstrap Datepicker: A Step-by-Step Guide

Is there a way to configure the Datepicker to display today's date and tomorrow's date? Click here for the JS file Check out the image on our website https://i.stack.imgur.com/VyFUB.jpg ...

Optimal Approach for Managing Files in JavaScript

I have successfully uploaded a JSON file to my server using NodeJS and the 'http' module. Utilizing the NPM package 'formidable', I was able to save the file sent by the user onto the server. My next goal is to extract information from ...

Transferring User ID from Google Tag Manager to GA4 Problem

I'm currently working on a new project and adding some dummy data to the dataLayer of Google Tag Manager from the \_app.tsx file. <Script id="gtg" strategy="beforeInteractive"> { window.dataLayer = window.dataLayer || &b ...

How can I achieve jq to output decimal notation instead of scientific notation when using tonumber()?

When handling a JSON object with the string "0.0000086900" as a key-value pair, performing |tonumber on it returns 8.69e-06. How do I ensure that only decimals are consistently returned? In this scenario, it should be 0.0000086900 SOLUTION (adapted from ...

Caution: It is important for each child to be assigned a distinct key - How to pass an array in

While following ReactJS tutorials on Scrimba, I came across a scenario where id props need to be passed in an array. import React from 'react'; import Joke from './components/Joke.js' import jokesData from './components/jokesDat ...

What are some ways to customize the appearance of the Material UI table header?

How can I customize the appearance of Material's UI table header? Perhaps by adding classes using useStyle. <TableHead > <TableRow > <TableCell hover>Dessert (100g serving)</TableCell> ...

Numerous Levels of Dropdown Menus

I am looking to implement a feature on a web page where users can select multiple vehicles using JQuery. The idea is that selecting the brand in the first dropdown will populate the second dropdown with the models available for that specific brand. The ...

An issue arose upon scanning the QR code for whatsapp-web.js, indicating a potential

My WhatsApp web bot encountered issues this week. C:\pinkmeupwabot\node_modules\whatsapp-web.js\node_modules\puppeteer\lib\cjs\puppeteer\common\ExecutionContext.js:221 throw new Error('Eval ...

I could really use some assistance with this script I'm working on that involves using ($

Using Ajax for Form Submission: $.ajax({ url: 'process.php', type: 'post', data: 'loginName=' + $("#loginName").val() + 'loginPass=' + $("#loginPass").val(), dataType: 'json', success: func ...

Creating a GITHUB project with Maven

Coming from a BIG Data background, I need some assistance with Maven. I am looking to obtain a JSON jar file for use in my json tables. There is serialization/deserialization code available on Github at this location: https://github.com/rcongiu/Hive-JSON-S ...