Debug School

rakesh kumar
rakesh kumar

Posted on • Updated on

Creating a structured array of objects from particular object contain key value pair in jquery

How to take all selected elements in array all multiselect elements

how to take key value pair in array of object from nested collection of array of objects using push methods

Use of push method

here it is format of array of strings

var data = [
  {
    "user_id": 1,
    "social_sites": { facebook: 'url1', twitter: 'url2', instagram: null },
    "social_price": { facebook: 20, twitter: 15, instagram: null }
  },
  {
    "user_id": 2,
    "social_sites": { facebook: 'url3', twitter: 'url4', instagram: 'url5' },
    "social_price": { facebook: 25, twitter: 18, instagram: 12 }
  },
  // ... other user objects
];
Enter fullscreen mode Exit fullscreen mode

===============================or=================

[
    {
        "id": 163,
        "user_id": "32",
        "user_name": "rakeshkumar",
        "user_email": "vibiv32093@bitofee.com",
        "file_pic": "",
        "slug_id": null,
        "slug": "rakeshkumar",
        "slugname": null,
        "country_id": "101",
        "state_id": "4025",
        "city_id": "58078",
        "mobile": "7488127637",
        "digital_marketer": null,
        "bio": "influencer",
        "social_site": "{\"facebook\":\"https:\\/\\/www.facebook.com\\/ravi.cotocus\",\"twitter\":\"https:\\/\\/www.twitter.com\\/rajesh.cotocus\",\"youtube\":null,\"wordpress\":null,\"tumblr\":null,\"instagram\":null,\"quora\":null,\"pinterest\":null,\"reddit\":null,\"koo\":null,\"scoopit\":null,\"slashdot\":null,\"telegram\":null,\"fb_grp\":null,\"linkedin_grp\":null,\"linkedin\":null,\"roposo\":null,\"chingari\":null,\"mitron\":null}",
        "social_price": "{\"facebook\":\"24\",\"twitter\":\"67\",\"youtube\":null,\"wordpress\":null,\"tumblr\":null,\"instagram\":null,\"quora\":null,\"pinterest\":null,\"reddit\":null,\"koo\":null,\"scoopit\":null,\"slashdot\":null,\"telegram\":null,\"fb_grp\":null,\"linkedin_grp\":null,\"linkedin\":null,\"roposo\":null,\"chingari\":null,\"mitron\":null}",
        "influencer_admin_id": null,
        "cart_socials": null,
        "admin_id": null,
        "country_name": "India",
        "state_name": "Jharkhand",
        "city_name": "Bokāro"
    },
    {
        "id": 157,
        "user_id": "28",
        "user_name": "admins",
        "user_email": "admins@gmail.com",
        "file_pic": "",
        "slug_id": null,
        "slug": "admins",
        "slugname": null,
        "country_id": "101",
        "state_id": "4025",
        "city_id": "58078",
        "mobile": "7488127637",
        "digital_marketer": "faceinfluencer",
        "bio": "dxfbfvb",
        "social_site": "{\"facebook\":\"http:\\/\\/www.facebook.com\\/ravimy.cotocus\",\"twitter\":null,\"youtube\":\"https:\\/\\/www.youtube.com\\/watch?v=4Tpm7D4-6DU&list=RDGMEMPipJmhsMq3GHGrfqf4WIqA&index=27\",\"wordpress\":\"https:\\/\\/wordpress.com\\/\",\"tumblr\":null,\"instagram\":\"https:\\/\\/www.instagram.com\\/\",\"quora\":\"https:\\/\\/www.quora.com\\/\",\"pinterest\":null,\"reddit\":null,\"koo\":null,\"scoopit\":null,\"slashdot\":null,\"telegram\":null,\"fb_grp\":null,\"linkedin_grp\":null,\"linkedin\":null,\"roposo\":null,\"chingari\":null,\"mitron\":null}",
        "social_price": "{\"facebook\":\"24\",\"twitter\":null,\"youtube\":\"78\",\"wordpress\":\"88\",\"tumblr\":null,\"instagram\":\"78\",\"quora\":\"55\",\"pinterest\":null,\"reddit\":null,\"koo\":null,\"scoopit\":null,\"slashdot\":null,\"telegram\":null,\"fb_grp\":null,\"linkedin_grp\":null,\"linkedin\":null,\"roposo\":null,\"chingari\":null,\"mitron\":null}",
        "influencer_admin_id": 28,
        "cart_socials": "{\"wordpress\":\"88\"}",
        "admin_id": "26",
        "country_name": "India",
        "state_name": "Jharkhand",
        "city_name": "Bokāro"
    }
]
Enter fullscreen mode Exit fullscreen mode

i want to extract social_site key value pair in array of object looks like

[
    {
        "site": "facebook",
        "site_url": "http://www.facebook.com/ravimy.cotocus"
    },
    {
        "site": "youtube",
        "site_url": "https://www.youtube.com/watch?v=4Tpm7D4-6DU&list=RDGMEMPipJmhsMq3GHGrfqf4WIqA&index=27"
    },
    {
        "site": "wordpress",
        "site_url": "https://wordpress.com/"
    },
    {
        "site": "instagram",
        "site_url": "https://www.instagram.com/"
    },
    {
        "site": "quora",
        "site_url": "https://www.quora.com/"
    }
]
Enter fullscreen mode Exit fullscreen mode

Solution

. displayFilteredData(data) Function:

function displayFilteredData(data) {
    var resultContainer = $('#resultContent');
    resultContainer.empty();
    var nonNullSocialSites = null;
    var nonNullSocialPrice = null;

    if (data && data.filters) {
        console.log("dfg")
        var selectedOptions = $('#filter_by_socialsite :selected');
        var selectedTexts = selectedOptions.map(function() {
            return $(this).text();
        }).get();
        console.log(selectedTexts);

        data.filters.forEach(function(user) {
            var nonNullSocialSites = extractNonNullSocialSites(user);
            var nonNullSocialPrice = extractNonNullSocialPrice(user);
            console.log("User ID:", user.user_id);
            console.log("NonNull Social Sites:", nonNullSocialSites);
            console.log("NonNull Social price:", nonNullSocialPrice);
            console.log("--------------------");
        });
    }
}
Enter fullscreen mode Exit fullscreen mode

Image description

extractNonNullSocialSites(user) Function:

function extractNonNullSocialSites(user) {
    var socialSiteObject = JSON.parse(user.social_site);
    var nonNullSocialSites = [];
    for (var key in socialSiteObject) {
        if (socialSiteObject[key] !== null) {
            nonNullSocialSites.push({ site: key, site_url: socialSiteObject[key] });
        }
    }
    return nonNullSocialSites;
}
Enter fullscreen mode Exit fullscreen mode

Image description

extractNonNullSocialPrice(user) Function:

function extractNonNullSocialPrice(user) {
    var socialPriceObject = JSON.parse(user.social_price);
    var nonNullSocialPrices = [];
    for (var key in socialPriceObject) {
        if (socialPriceObject[key] !== null) {
            nonNullSocialPrices.push({ site: key, price: socialPriceObject[key] });
        }
    }
    console.log(nonNullSocialPrices);
    console.log(socialPriceObject);
    return nonNullSocialPrices;
}
Enter fullscreen mode Exit fullscreen mode

Image description

Use of push method

adding the specified elements as new elements at the end. The push method returns the new length of the array after the addition of elements.

 if (socialPriceObject[key] !== null) {
            nonNullSocialPrices.push({ site: key, price: socialPriceObject[key] });
        }
Enter fullscreen mode Exit fullscreen mode
array.push(element1, element2, ..., elementN);
Enter fullscreen mode Exit fullscreen mode

Top comments (0)