javascript - How to remove leading and trailing double-quotes coming from local storage using angular or JQuery - Stack Overflow

admin管理员组

文章数量:1291198

This is got to be simple so here's the deal;

I place the following ARRAY of objects (JSON) into local storage and it appears like this:

[{"id": 150, "label": "Animal Cookies (Phat Panda)"}, {"id": 110, "label": "Blue Dream (Pioneer)"}, {"id": 30, "label": "Candyland"}, {"id": 130, "label": "Dragon OG (Avitas)"}, {"id": 20, "label": "Golden Pineapple Family"}, {"id": 140, "label": "Golden Ticket (Liberty Reach)"}, {"id": 120, "label": "GSC: Thin Mint (Phat Panda)"}, {"id": 40, "label": "Jack Herer Master Blend"}, {"id": 80, "label": "Owyn's White Widow Blend Master"}, {"id": 50, "label": "P91 San Diego Family"}, {"id": 60, "label": "Phat Panda"}, {"id": 100, "label": "Space Queen Family Sativa"}, {"id": 10, "label": "Trash"}, {"id": 70, "label": "Urkel"}, {"id": 90, "label": "White Widow"}]

Yes, these are Cannabis strains and I'm building a software for Cannabis growers.

PROBLEM:

When I retrieve it like so:

           /**
             * Angular Dropdown Multi-select
             *  - <<<< EXAMPLE HERE!
             * For STRAINS to select what will be in the room selected
             *
             */
            $scope.plantWizModel = [];
            $scope.plantWizData = [];
            //Get the REFORMATTED data from LOCALSTORAGE
            //$scope.plantWizData = storageLocalService.getItemJSON("strainsmini");

            $scope.plantWizData = [{"id": 150, "label": "Animal Cookies (Phat Panda)"}, {"id": 110, "label": "Blue Dream (Pioneer)"}, {"id": 30, "label": "Candyland"}, {"id": 130, "label": "Dragon OG (Avitas)"}, {"id": 20, "label": "Golden Pineapple Family"}, {"id": 140, "label": "Golden Ticket (Liberty Reach)"}, {"id": 120, "label": "GSC: Thin Mint (Phat Panda)"}, {"id": 40, "label": "Jack Herer Master Blend"}, {"id": 80, "label": "Owyn's White Widow Blend Master"}, {"id": 50, "label": "P91 San Diego Family"}, {"id": 60, "label": "Phat Panda"}, {"id": 100, "label": "Space Queen Family Sativa"}, {"id": 10, "label": "Trash"}, {"id": 70, "label": "Urkel"}, {"id": 90, "label": "White Widow"}];
            console.log("PLANT WIZ DATA: ", $scope.plantWizData);
            $scope.plantWizSettings = {
                checkBoxes: true
            };
            $scope.plantWizCustomTexts = {
                buttonDefaultText: 'Select up to 4 Strains',
                selectionLimit: 4
            };

What I get is THIS: PERFECTION...

BUT, when I change the code from "HARD CODING" the $scope.plantWizData like so:

$scope.plantWizData = storageLocalService.getItemJSON("strainsmini");

The error I get is this:

angular.js:12332 Error: [ngRepeat:dupes] Duplicates in a repeater are not 
allowed. Use 'track by' expression to specify unique keys. Repeater: option 
in options, Duplicate key: string:", Duplicate value: "
.4.2/ngRepeat/dupes?p0=option%20in%20options&p1=string%3A%22&p2=%22
    at angular.js:68
    at ngRepeatAction (angular.js:27144)
    at Object.$watchCollectionAction [as fn] (angular.js:15550)
    at Scope.$digest (angular.js:15685)
    at Scope.$apply (angular.js:15953)
    at done (angular.js:10366)
    at pleteRequest (angular.js:10538)
    at XMLHttpRequest.requestLoaded (angular.js:10479)

Therefore, this is the result:

What's apparently occuring is that when I get the data from LOCAL STORAGE, "" appear LEADING and TRAILING on $scope.plantWizData = []; like so:

$scope.plantWizData = >>>> "[{"id": 150, "label": "Animal Cookies (Phat Panda)"}, {"id": 110, "label": "Blue Dream (Pioneer)"}, {"id": 30, "label": "Candyland"}, {"id": 130, "label": "Dragon OG (Avitas)"}, {"id": 20, "label": "Golden Pineapple Family"}, {"id": 140, "label": "Golden Ticket (Liberty Reach)"}, {"id": 120, "label": "GSC: Thin Mint (Phat Panda)"}, {"id": 40, "label": "Jack Herer Master Blend"}, {"id": 80, "label": "Owyn's White Widow Blend Master"}, {"id": 50, "label": "P91 San Diego Family"}, {"id": 60, "label": "Phat Panda"}, {"id": 100, "label": "Space Queen Family Sativa"}, {"id": 10, "label": "Trash"}, {"id": 70, "label": "Urkel"}, {"id": 90, "label": "White Widow"}]" <<<<;

So, how do I get rid of them because I need to keep this solution DYNAMIC and not STATIC?

Thank you.

This is got to be simple so here's the deal;

I place the following ARRAY of objects (JSON) into local storage and it appears like this:

[{"id": 150, "label": "Animal Cookies (Phat Panda)"}, {"id": 110, "label": "Blue Dream (Pioneer)"}, {"id": 30, "label": "Candyland"}, {"id": 130, "label": "Dragon OG (Avitas)"}, {"id": 20, "label": "Golden Pineapple Family"}, {"id": 140, "label": "Golden Ticket (Liberty Reach)"}, {"id": 120, "label": "GSC: Thin Mint (Phat Panda)"}, {"id": 40, "label": "Jack Herer Master Blend"}, {"id": 80, "label": "Owyn's White Widow Blend Master"}, {"id": 50, "label": "P91 San Diego Family"}, {"id": 60, "label": "Phat Panda"}, {"id": 100, "label": "Space Queen Family Sativa"}, {"id": 10, "label": "Trash"}, {"id": 70, "label": "Urkel"}, {"id": 90, "label": "White Widow"}]

Yes, these are Cannabis strains and I'm building a software for Cannabis growers.

PROBLEM:

When I retrieve it like so:

           /**
             * Angular Dropdown Multi-select
             * http://dotansimha.github.io/angularjs-dropdown-multiselect/docs/#/main - <<<< EXAMPLE HERE!
             * For STRAINS to select what will be in the room selected
             *
             */
            $scope.plantWizModel = [];
            $scope.plantWizData = [];
            //Get the REFORMATTED data from LOCALSTORAGE
            //$scope.plantWizData = storageLocalService.getItemJSON("strainsmini");

            $scope.plantWizData = [{"id": 150, "label": "Animal Cookies (Phat Panda)"}, {"id": 110, "label": "Blue Dream (Pioneer)"}, {"id": 30, "label": "Candyland"}, {"id": 130, "label": "Dragon OG (Avitas)"}, {"id": 20, "label": "Golden Pineapple Family"}, {"id": 140, "label": "Golden Ticket (Liberty Reach)"}, {"id": 120, "label": "GSC: Thin Mint (Phat Panda)"}, {"id": 40, "label": "Jack Herer Master Blend"}, {"id": 80, "label": "Owyn's White Widow Blend Master"}, {"id": 50, "label": "P91 San Diego Family"}, {"id": 60, "label": "Phat Panda"}, {"id": 100, "label": "Space Queen Family Sativa"}, {"id": 10, "label": "Trash"}, {"id": 70, "label": "Urkel"}, {"id": 90, "label": "White Widow"}];
            console.log("PLANT WIZ DATA: ", $scope.plantWizData);
            $scope.plantWizSettings = {
                checkBoxes: true
            };
            $scope.plantWizCustomTexts = {
                buttonDefaultText: 'Select up to 4 Strains',
                selectionLimit: 4
            };

What I get is THIS: PERFECTION...

BUT, when I change the code from "HARD CODING" the $scope.plantWizData like so:

$scope.plantWizData = storageLocalService.getItemJSON("strainsmini");

The error I get is this:

angular.js:12332 Error: [ngRepeat:dupes] Duplicates in a repeater are not 
allowed. Use 'track by' expression to specify unique keys. Repeater: option 
in options, Duplicate key: string:", Duplicate value: "
http://errors.angularjs/1.4.2/ngRepeat/dupes?p0=option%20in%20options&p1=string%3A%22&p2=%22
    at angular.js:68
    at ngRepeatAction (angular.js:27144)
    at Object.$watchCollectionAction [as fn] (angular.js:15550)
    at Scope.$digest (angular.js:15685)
    at Scope.$apply (angular.js:15953)
    at done (angular.js:10366)
    at pleteRequest (angular.js:10538)
    at XMLHttpRequest.requestLoaded (angular.js:10479)

Therefore, this is the result:

What's apparently occuring is that when I get the data from LOCAL STORAGE, "" appear LEADING and TRAILING on $scope.plantWizData = []; like so:

$scope.plantWizData = >>>> "[{"id": 150, "label": "Animal Cookies (Phat Panda)"}, {"id": 110, "label": "Blue Dream (Pioneer)"}, {"id": 30, "label": "Candyland"}, {"id": 130, "label": "Dragon OG (Avitas)"}, {"id": 20, "label": "Golden Pineapple Family"}, {"id": 140, "label": "Golden Ticket (Liberty Reach)"}, {"id": 120, "label": "GSC: Thin Mint (Phat Panda)"}, {"id": 40, "label": "Jack Herer Master Blend"}, {"id": 80, "label": "Owyn's White Widow Blend Master"}, {"id": 50, "label": "P91 San Diego Family"}, {"id": 60, "label": "Phat Panda"}, {"id": 100, "label": "Space Queen Family Sativa"}, {"id": 10, "label": "Trash"}, {"id": 70, "label": "Urkel"}, {"id": 90, "label": "White Widow"}]" <<<<;

So, how do I get rid of them because I need to keep this solution DYNAMIC and not STATIC?

Thank you.

• javascript
• jquery
• angularjs

Share Improve this question Follow asked Oct 21, 2017 at 16:18 Peter The Angular DudePeter The Angular Dude 1,18877 gold badges2828 silver badges6161 bronze badges 3

• Why is use of angularjs necessary? – guest271314 Commented Oct 21, 2017 at 16:21
• 1 Probably because you haven't parsed the json in storageLocalService.getItemJSON. Show that code – charlietfl Commented Oct 21, 2017 at 16:22
• Can also save yourself setting and getting by using ngStorage module – charlietfl Commented Oct 21, 2017 at 16:23

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

You can use template literal to create valid JSON without leading or trailing double quotation marks

let json = `[{"id": 150, ..}]`;
localStorage.setItem("json", json);
let o = JSON.parse(localStorage.getItem("json"));

Using JSON.parse removes double quotes.

本文标签：