AngularJS ng-repeat manipulate ID - javascript

I am looking for an way to easily manipulate an ID within an ng-repeat. For example lets say I have a customer within a customer table with a customerId. I am using that customerId in another table such as orders. Now when I pull the data from orders for a user to see in an ng-repeat table, I would like to change the customerId to customerName for visual purposes only not actually changing the physical value, just the displayed.
My first though, I can see this is possible when requesting a list of orders in the php script to loop request just the customerName based on the customerId from the customer table and add to the orders array, but this seems very long winded and not as friendly as something I could manipulate in the DOM. My second thought was a filter although ajax requests seem to not be viable option within a filter.
Can anyone point me in the right direction?
Cheers.

Moving to an "answer" so I can format this better.
Assuming you have two tables. Orders with a foreign key column called CustomerID and Customers table that has a primary key column of CustomerID. You would join them with all the Orders fields you want. I don't have mysql so the syntax could vary slightly but this is the idea:
SELECT Customers.CustomerName, Orders.OrderID, Orders.SomeField
FROM Customers
LEFT JOIN Orders
ON Customers.CustomerID=Orders.CustomerID
ORDER BY Customers.CustomerName
WHERE Order.OrderId = 1234;
This is directly from http://www.w3schools.com/sql/sql_join_left.asp

Related

Supabase & #nuxtjs/supabase not getting the correct data from join table

I use the #nuxtjs/supabase module (essentially supabase-js).
I have a table "challenges" and two join tables "profile_challenge" (to assign the challenge to a profile) and "challenge_category" (to assign categories to the challenge). Both of these join tables are identical and store only the respective ID's of both reference tables. The respective tables "categories" and "profiles" are very simplistic and only contain an id and some text columns.
I make a request like this:
.from('challenges').select('*, profiles(id, username), categories(title, image_url)')
While I get the correct category data, the profile data is somehow wrong. For all 4 challenges i get the same profile data, although 2 challenges are assigned (through the join table) to a different profile.
How could it be that the categories work fine, and an identical table & request does not?
On a seperate site, when i get a single challenge, i get the correct profile.
Also getting the id's directly from the joining tables works fine.
Dump getting all the Challenges & Profiles
.from('challenges').select(*, profiles(username)
.from('challenges').select(*, profiles(username).eq('id', routeID).single()
I had this same problem, was hoping on an update of this issue. While I have no solution, I was able to find a workaround. If you can accept(or filter out yourself in code) another level of nesting, you can join through the join table explicitly.
so, where you have
.from('challenges').select('*, profiles(id, username), categories(title, image_url)')
it would be
.from('challenges').select('*, profile_challenge!inner(profile_id, profiles(id,username))') ...same for challenge_category
It's not ideal but it's able to tide me over until Supabase fixes it on their side.

Get data from MySQL database and add to list (NodeJS)

So using a list of ids, I'm trying to get data for each element in the database and add that element to a list. At the end, I'm displaying it on an HTML page. How would I do that? Right now, since it executes the queries async, the list will be empty after running the code to execute the query and add the result to a list.
Lets assume you have a table called teams that contains a row for each team, with columns like id, games, total_points, wins, and losses.
Lets assume you have an array of team id. You want to query the database for those records, then do some things with them before returning them to the front end as json.
This is how i understand your problem. If this isn't the case, please clarify in a comment on this answer.
Possible solution:
Do it all in one query. I'm going to use my favorite mysql library, knexjs.
var columns = ['id', 'games', 'total_points', 'wins', 'loses'];
function getTeams(ids){
return knex.select(columns).where('id', 'in', ids)
.then((teams) => {
//do whatever with array of teams
return teams;
}
}
It's pretty much as simple as that.

Jquery or javascript to display "more information", data taken from SQL database

i'm not sure if this is possible, I've looked into it but can't seem to find anything.
I'm just going to give a quick example of my scenario. Basically I have two main tables Classes and Cars. For example, Executive class will have S-Class, BMW 7 Series and so on, compact will have mini cooper etc.
Now, on a website what I'm trying to do is through javascript/ajax/jquery (not quite sure what method) is to display the Class and allow the user to be able to click on it then beneath display the vehicles
Now, I have an sql database and that is always changing, cars can be edited or changed etc so when I click a class, obviously updated information needs to be displayed.
However, after doing some research I can't seem to find a way which does not involve hard coding information into the page?
Any help please?
You need to create two dynamic pages - one to retrieve categories (classes) and one to retrieve cars within a chosen category.
You haven't mentioned which server-side language you're using so I'll assume PHP for the moment, but it'll work the same for any language you choose.
Part 1 - categories.php
query the database and retrieve a list of all categories (name, id)
output these in a SELECT list (or similar)
include a DIV other container to fill in any retrieved cars for that category
The output would be something like this:
<select id="categories">
<option value="-1">Select a category</option>
<option value="1">Executive</option>
<option value="2">Compact</option>
</select>
<div id="cars"><!-- cars go here --></div>
I have used the attribute "value" to store the database ID of the category, for later retrieval via JQuery.
Part 2 - cars.php
takes a URL parameter "category" to determine which category to use to query for cars (e.g. cars.php?category=1)
query database with selected category ID and retrieve matching cars
output results in HTML list (or similar)
Part 3 - JavaScript
Once you have the above stuff going then you can simply pick up the ID from the category list and send out a request for the cars when the option changes. On your category.php page you would include the JQuery library first, then this script:
JQuery(document).ready(function($){
// capture change event on select list
$("categories").on('change', function(){
// get current value
var value = $(this).val();
// retrieve cars using AJAX, passing category value
$.get("cars.php", {category:value}, function(data){
// html list for cars retrieved here as data - fill in the cars html
$("#cars").html(data);
});
});
});
There are of course many ways to skin the cat, but this is probably the simplest for starters. If you're concerned with getting the most up to date information for every request, then you need to go back to the server each time the category changes. If database changes are likely to be less frequent, and the data set isn't huge then you may consider retrieving it all in one lump of JSON and using that as a local "database" to do lookups against.

Each Player has 50 items [saving that in SQL]

I have two issues that both resemble each other.
Each player has access to 50 inventory slots. 1 slot holds 1 item.
I figured that I can make a table of items. Items have qualities and ID's.
I have come to this solution:
Each character table can have a textbox that holds json data that is key value pairs of item slots [0-49] and item id's, since every item has a unique id.
However I am not sure this is the most elegant solution.
And then this problem, that should be solved the same way? [I think]
Each player has access to 50 skills. Each skill can grow 100 levels.
I wouldn't encode JSON data in a database -- you want a separate table to link things together.
So, maybe player_item_map which would have fields item_id, player_id (and maybe an internal id if you ever need to refer to the map itself). Then you link arbitrary numbers of items to users (you can use constraints in item ownership is unique, and enforce the item limit somewhere else). Alternatively prepopulate an inventory table with the slots, using the fields player_id, slot, item_id (can be null). Then you don't need to insert or worry about missing rows.
You can do similar for skills, but had a skill_level field as well.

Best approach for sortable table with a lot of data

On our web application, the search results are displayed in sortable tables. The user can click on any column and sort the result. The problem is some times, the user does a broad search and gets a lot of data returned. To make the sortable part work, you probably need all the results, which takes a long time. Or I can retrieve few results at a time, but then sorting won't really work well. What's the best practice to display sortable tables that might contain lots of data?
Thanks for all the advises. I will certainly going over these.
We are using an existing Javascript framework that has the sortable table; "lots" of results means hundreds. The problem is that our users are at some remote site and a lot of delay is the network time to send/receive data from the data center. Sorting the data at the database side and only send one page worth of results at a time is nice; but when the user clicks some column header, another round trip is done, which always add 3-4 seconds.
Well, I guess that might be the network team's problem :)
Using sorting paging at the database level is the correct answer. If your query returns 1000 rows, but you're only going to show the user 10 of them, there is no need for the other 990 to be sent across the network.
Here is a mysql example. Say you need 10 rows, 21-30, from the 'people' table:
SELECT * FROM people LIMIT 21, 10
You should be doing paging back on the database server. E.g. on SQL 2005 and SQL 2008 there are paging techniques. I'd suggest looking at paging options for whatever system you're looking at.
What database are you using as there some good paging option in SQL 2005 and upwards using ROW_NUMBER to allow you to do paging on the server. I found this good one on Christian Darie's blog
eg This procedure which is used to page products in a category. You just pass in the pagenumber you want and the number of products on the page etc
CREATE PROCEDURE GetProductsInCategory
(#CategoryID INT,
#DescriptionLength INT,
#PageNumber INT,
#ProductsPerPage INT,
#HowManyProducts INT OUTPUT)
AS
-- declare a new TABLE variable
DECLARE #Products TABLE
(RowNumber INT,
ProductID INT,
Name VARCHAR(50),
Description VARCHAR(5000),
Price MONEY,
Image1FileName VARCHAR(50),
Image2FileName VARCHAR(50),
OnDepartmentPromotion BIT,
OnCatalogPromotion BIT)
-- populate the table variable with the complete list of products
INSERT INTO #Products
SELECT ROW_NUMBER() OVER (ORDER BY Product.ProductID),
Product.ProductID, Name,
SUBSTRING(Description, 1, #DescriptionLength) + '...' AS Description,
Price, Image1FileName, Image2FileName, OnDepartmentPromotion, OnCatalogPromotion
FROM Product INNER JOIN ProductCategory
ON Product.ProductID = ProductCategory.ProductID
WHERE ProductCategory.CategoryID = #CategoryID
-- return the total number of products using an OUTPUT variable
SELECT #HowManyProducts = COUNT(ProductID) FROM #Products
-- extract the requested page of products
SELECT ProductID, Name, Description, Price, Image1FileName,
Image2FileName, OnDepartmentPromotion, OnCatalogPromotion
FROM #Products
WHERE RowNumber > (#PageNumber - 1) * #ProductsPerPage
AND RowNumber <= #PageNumber * #ProductsPerPage
You could do the sorting on the server. AJAX would eliminate the necessity of a full refresh, but there'd still be a delay. Sides, databases a generally very fast at sorting.
For these situations I employ techniques on the SQL Server side that not only leverage the database for the sorting, but also use custom paging to ONLY return the specific records needed.
It is a bit of a pain to implemement at first, but the performance is amazing afterwards!
How large is "a lot" of data? Hundreds of rows? Thousands?
Sorting can be done via JavaScript painlessly with Mochikit Sortable Tables. However, if the data takes a long time to sort (most likely a second or two [or three!]) then you may want to give the user some visual cue that soming is happening and the page didn't just freeze. For example, tint the screen (a la Lightbox) and display a "sorting" animation or text.

Categories