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

Issue

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…

enter image description here

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.org/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 completeRequest (angular.js:10538)
    at XMLHttpRequest.requestLoaded (angular.js:10479)

Therefore, this is the result:

enter image description here

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.

Solution

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"));

Answered By – guest271314

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published