Debug School

rakesh kumar
rakesh kumar

Posted on • Updated on

How to renders data from array of object in laravel using jquery

Renders data using each function

my data is in controller function

return response()->json($data);

 public function allinfluencerdata(Request $request)      
         {  

            log::info("data allinfluencerdata");
            $currentURL = url()->current(); 
            $login_email = Auth::user()->email;
            $profiles = Addprofile::all();           
            log::info("data if ke andar hai");  
            $data =DB::connection('payments')->table("social_url")
            ->leftJoin('countries', 'social_url.country_id', '=', 'countries.country_id')
            ->leftJoin('states', 'social_url.state_id', '=', 'states.state_id')  
            ->leftJoin('addcarts', 'social_url.user_id', '=', 'addcarts.influencer_admin_id')          
            ->leftJoin('cities', 'social_url.city_id', '=', 'cities.city_id')        
            ->where('social_url.user_email', '<>', $login_email)
            ->select('social_url.*', 'addcarts.influencer_admin_id','addcarts.cart_socials','addcarts.admin_id','countries.country_name', 'states.state_name', 'cities.city_name')
            ->orderBy('id', 'desc')           
            ->get();
            log::info($data);
            return response()->json($data);

          }
Enter fullscreen mode Exit fullscreen mode

json encoded format

[{"field1":"value1","field2":10,"created_at":"2022-01-01 12:30:00"},
 {"field1":"value2","field2":20,"created_at":"2022-01-02 14:45:00"}]
Enter fullscreen mode Exit fullscreen mode 
[{"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"}","influencer_admin_id":32,"cart_socials":"{\"facebook\":\"24\",\"youtube\":\"90\"}","admin_id":"26","country_name":"India","state_name":"Jharkhand","city_name":"Bok\u0101ro"},{"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",}]
Enter fullscreen mode Exit fullscreen mode 
[
    {
        "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

using $.each (jQuery)
function in jquery

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

    if (data && data.filters) {
        console.log("dfg");
        var filters = data.filters;
        console.log(filters);

        var startIndex = (currentPage - 1) * itemsPerPage;
        var endIndex = startIndex + itemsPerPage;
        var paginatedData = filters.slice(startIndex, endIndex);

        var totalPages = Math.ceil(filters.length / itemsPerPage);
        addPaginationControls(totalPages);

        if (paginatedData.length > 0) {
            $.each(paginatedData, function (index, item) {
                resultContainer.append('<p>' + item + '</p>');
            });
        } else {
            resultContainer.append('<p>No data found.</p>');
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Notes
in jquery

if (paginatedData.length > 0) {
            $.each(paginatedData, function (index, item) {
                resultContainer.append('<p>' + item + '</p>');
            });
        } else {
            resultContainer.append('<p>No data found.</p>');
        }
Enter fullscreen mode Exit fullscreen mode

In react js

function DisplayFilteredData({ filteredData }) {
  return (
    <div>
      {filteredData.map((item, index) => (
        <p key={index}>{item}</p>
      ))}
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

this is my html data where resultContaineris id through which we display content and paginationContainer is for pagination through which we paginate using jquery

 <div class="row" id="resultContainer" style="margin-top:2%;">
    <div class="col-lg-12 col-md-12 col-sm-12 col-12">
        <div class="col-md-12 col-lg-12">
            <div class="card" style="padding: 27px;">

                <div id="resultContent">
                    <!-- Your data results will be added here -->
                </div>
                <div class="card-body" id="paginationContainer">
                    <!-- Pagination buttons will be added here -->
                </div>
            </div>
        </div>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

using data.forEach

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 
[
    {
        "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 
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("--------------------");
});

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;
}

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

Top comments (0)

Read next

vijaycotocus_46 profile image

Explore Faridabad with Ease: Rent Bikes and Cars with Motoshare for a Seamless Travel Experience

Vijay -

vijaycotocus_46 profile image

Discover Vadodara at Your Own Pace: Rent Bikes and Cars with Motoshare

Vijay -

vijaycotocus_46 profile image

Explore Ghaziabad with Ease: Rent Bikes and Cars with Motoshare

Vijay -

vijaycotocus_46 profile image

Explore Patna with Ease: Rent Bikes and Cars through Motoshare for a Seamless Travel Experience

Vijay -