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);
}
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"}]
[{"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",}]
[
{
"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"
}
]
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>');
}
}
}
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>');
}
In react js
function DisplayFilteredData({ filteredData }) {
return (
<div>
{filteredData.map((item, index) => (
<p key={index}>{item}</p>
))}
</div>
);
}
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>
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
];
[
{
"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"
}
]
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;
}
}
Top comments (0)