CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

webdesigner Praktikant

16. december 2014 - 10:11 Der er 6 kommentarer

AngularJS - specifik node i Json object baser på object ID

Hejsa

Har en Json service med data
jeg skriver ud i NG-repeat
I en Unsortede list .
Vil nu gerne have den markerede node over en and div da det er sub inddelt fra servicen ...

Eksempel....

var Personer = [{
"ID" : "1",
"Navn" : "Peter",
"Efter navn" : "Hansen",
"Adresse" : [
{
"By" : "Odense"
"Gade" : "Hc Andersens Vej"
"HusNr" : "32",
"PostNr" : "5000"
}
]
},
{
"ID" : "2",
"Navn" : "Louise",
"Efter navn" : "Nilsen",
"Adresse" : [
{
"By" : "Randers"
"Gade" : "Hæpringvej"
"HusNr" : "23",
"PostNr" : "8652"
}
]
}];

Personer er listet og adressen skal vises i en div når jeg trykker på Personen

Hvordan finder jeg Louises adresse når jeg klikker på hende?

Bruger som sagt en ng-repeat på Personen

HTML:
<div ng-repeat="Person in Personer" ng-click="Person($index)">
{{Person.Navn}} {{Person.efternavn}}
</div>

<div >
{{by}}
{{Gade}}
{{HusNr}}
{{PostNr}}
</div>

Synes godt om

olsensweb.dk Ekspert

16. december 2014 - 23:55 #1

er først lige started med at kigge på angular og prøved at lave deres tutorial
ud over det fandt jeg inspiration http://www.w3schools.com/angular/
så nedenstående code kan optemeres

du arbejder ud fra noget nær disse
http://www.w3schools.com/angular/angular_directives.asp
http://www.w3schools.com/angular/angular_sql.asp
og skal lave noget ala denne
http://www.w3schools.com/angular/angular_includes.asp

første forsøg til inspiration
html

     
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>demo</title>
        <style>
            table, th , td  {
                border: 1px solid grey;
                border-collapse: collapse;
                padding: 5px;
            }
            table tr:nth-child(odd)    {
                background-color: #f1f1f1;
            }
            table tr:nth-child(even) {
                background-color: #ffffff;
            }
        </style>
        <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
        <script src= "controllers.js"></script>
    </head>
    <body>
        <div data-ng-app="" data-ng-controller="customersController">
            <div>
                <table>
                    <tr data-ng-repeat="user in users">
                        <td> <button  data-ng-click="editUser(user.ID)">  Edit    </button> </td>
                        <td>{{ user.Navn}}</td>
                        <td>{{ user.Efternavn}}</td>
                    </tr>
                </table>
            </div>
            <div>
                {{ Navn}}
                {{Efternavn}}
                {{by}}
                {{Gade}}
                {{HusNr}}
                {{PostNr}}
            </div>
        </div>
    </body>
</html>

controllers.js


function customersController($scope) {
    var Personer = [
        {"ID": "1", "Navn": "Peter", "Efternavn": "Hansen", "Adresse": [{"By": "Odense", "Gade": "Hc Andersens Vej", "HusNr": "32", "PostNr": "5000"}]},
        {"ID": "2", "Navn": "Louise", "Efternavn": "Nilsen", "Adresse": [{"By": "Randers", "Gade": "Hæpringvej", "HusNr": "23", "PostNr": "8652"}]}];
    // indsat manglende komma efter bynavn og gade navn, og omdøbt "Efter navn" til Efternavn
    $scope.users = Personer;


    $scope.editUser = function (id) {
        $scope.edit = false;
        // $scope.Efternavn = $scope.users[id-1].Efternavn;
        var user_obj = $scope.users[id - 1]; // id=1 => index =0, id=2 => index =1, derfor trækkes der 1 fra
        $scope.Efternavn = user_obj.Efternavn;
        $scope.Navn = user_obj.Navn;
        $scope.by = user_obj.Adresse[0].By;
        $scope.Gade = user_obj.Adresse[0].Gade;
        $scope.HusNr = user_obj.Adresse[0].HusNr;
        $scope.PostNr = user_obj.Adresse[0].PostNr;
    };

}

Synes godt om

intenz Novice

26. december 2014 - 11:21 #2

Det er lidt omsonst at bruge ID'et til at slå brugeren op når du allerede bruger user objektet i loop (ID'et er heller ikke nødvendigvis det samme som dens index i array'et).

Ud fra ronols eksempel, kan du ændre:
data-ng-click="editUser(user.ID)"

til:
ng-click="editUser(user)"

Og $scope.editUser til:

$scope.editUser = function (user) {
$scope.edit = false;

$scope.Efternavn = user.Efternavn;
$scope.Navn = user.Navn;
$scope.by = user.Adresse[0].By;
$scope.Gade = user.Adresse[0].Gade;
$scope.HusNr = user.Adresse[0].HusNr;
$scope.PostNr = user.Adresse[0].PostNr;
};

Synes godt om

webdesigner Praktikant

10. februar 2015 - 15:31 #3

sweet taæ

Synes godt om

webdesigner Praktikant

10. februar 2015 - 16:01 #4

smid et svar :)

Synes godt om

olsensweb.dk Ekspert

12. februar 2015 - 13:47 #5

får du her

@intenz: smider du et svar også, du kom da med en klar forbedring

Synes godt om

Vijay Singh Praktikant

23. november 2018 - 08:10 #6

For those still reading this answer, if you are using ES6 the find method was added in arrays. So assuming the same collection, the solution be:

const foo = { "results": [
{
"id": 12,
"name": "Test"
},
{
"id": 2,
"name": "Beispiel"
},
{
"id": 3,
"name": "Sample"
}
] };
foo.results.find(item => item.id === 2)

I'd totally go for this solution now, as is less tied to angular or any other framework. Pure Javascript.

Angular solution (old solution)

I aimed to solve this problem by doing the following:

$filter('filter')(foo.results, {id: 1})[0];

A use case example:

app.controller('FooCtrl', ['$filter', function($filter) {
var foo = { "results": [
{
"id": 12,
"name": "Test"
},
{
"id": 2,
"name": "Beispiel"
},
{
"id": 3,
"name": "Sample"
}
] };

// We filter the array by id, the result is an array
// so we select the element 0

single_object = $filter('filter')(foo.results, function (d) {return d.id === 2;})[0];

// If you want to see the result, just check the log
console.log(single_object);
}]);

To learn: https://hackr.io/tutorials/learn-angular

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Sæt vindue størrelse Af poulmadsen i JavaScript	1	08/10/202417:18	13/10/202412:33
Opgavestyring Af ingeman i JavaScript	1	15/09/202416:06	15/09/202420:40
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS