0

I want to dispay a JSON Array in <li>'s inside a Wordpress-Template.

This is the JSON-File: http://www2.suntrips.de/import/Output-extended.json

I have absolutly no clue how to do it.

This is my HTML

<div ng-app="appExtern" ng-controller="externCtrl">
    <ul>
        <li ng-repeat="name in Destinations">{{name}}</li>
    </ul>
</div>

And this is my JS

var appExtern = angular.module('appExtern',[]);
appExtern.controller('externCtrl', function($scope, $http) {
    $http.get("http://www2.suntrips.de/import/Output-extended.json").then(function(response) {
        $scope.Destinations = response.data;
    });
});

Can anybody help?

Improve this question

3 Answers 3

Reset to default
2

Your JSON structure is the following :

{
  "themes" : [ 
     { "id": ... , "name" : ... , "imageUrl" : ..., ... },
     { "id": ... , "name" : ... , "imageUrl" : ..., ... },
     { "id": ... , "name" : ... , "imageUrl" : ..., ... }
  ]
}

So here's how you use that :

<li ng-repeat="theme in Destinations.themes">
    <p>{{theme.name}}</p>
    <img src="{{theme.imageUrl}}"/>
</li>

(As an aside, I'm always quite astonished by the number of people who are learning Angular 1, when Angular 2 - now Angular 4 - has been in development for years and its RC1 came out in September 2016.)

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Some people don't want to move onto TypeScript, that or they're used to AngularJS and moving onto Angular2-4 might seem pointless. In answer to your bottom statement :)
But people who refuse to move eventually sink with the boat. Especially in web development. That's what happened to those who loved Flash and refused to learn HTML (I know one).
1

Your JSON contains the following data :

{
    "theme" : [
        {
            "id" : 4,
            "name" : Strand,
            "imageUrl" : https://travelc.azureedge.net/themes/1869748-9bb43f9e-a7a1-4d74-bc23-7b180829a019.jpg,
            "ideas" : +[ ... ],
            "minPrice" : 922,
            "minPriceDot" : 922
        }, 
        [ ... ]       
    ]
}

So you must ng-repeat on Destination["theme"] in order to access its data. Not Destination. Following code should do the trick :

<div ng-app="appExtern" ng-controller="externCtrl">
    <ul>
        <li ng-repeat="theme in Destinations.theme">{{ theme.name }}</li>
    </ul>
</div>
Improve this answer

1 Comment

I'm sorry - nope :-/
0 
<?php
/**
 * The header for our theme
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package suntrips
 */

?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="site">
    <a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'suntrips' ); ?></a>
    <?php if(!is_page_template( 'blank-page.php' )): ?>
    <header id="masthead" class="site-header navbar navbar-static-top" role="banner">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only"><?php echo esc_html__('Toggle navigation', 'suntrips'); ?></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
                <div class="navbar-brand">
                    <?php if ( get_theme_mod( 'wp_bootstrap_starter_logo' ) ): ?>
                        <a href="<?php echo esc_url( home_url( '/' )); ?>">
                            <img src="<?php echo get_theme_mod( 'wp_bootstrap_starter_logo' ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>">
                        </a>
                    <?php else : ?>
                        <a class="site-title" href="<?php echo esc_url( home_url( '/' )); ?>"><?php esc_url(bloginfo('name')); ?></a>
                    <?php endif; ?>

                </div>

            </div>

            <nav class="collapse navbar-collapse navbar-left" role="navigation">

                <?php
                    wp_nav_menu( array(
                        'theme_location'    => 'primary',
                        'depth'             => 3,
                        'link_before' => '', //Add wrapper in the text inside the anchor tag
                        'link_after' => '',
                        'container'         => '',
                        'container_class'   => '',
                        'container_id'      => 'navbar-collapsed',
                        'menu_class'        => 'nav navbar-nav',
                        'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                        'walker'            => new wp_bootstrap_navwalker())
                    );
                ?>

            </nav>
        </div>
    </header><!-- #masthead -->

    <div ng-app="appExtern" ng-controller="externCtrl">
        <ul>
            <li ng-repeat="theme in Destinations.themes">
                <p>{{theme.name}}</p>
                <img src="{{theme.imageUrl}}"/>
            </li>
        </ul>
    </div>

    <div id="page-sub-header" style="background-image: url('<?php if(has_header_image()) { header_image(); } ?>');">
        <div class="container">
            <h1><?php esc_url(bloginfo('name')); ?></h1>
            <p><?php bloginfo( 'description'); ?></p>
        </div>
    </div>
    <div id="content" class="site-content">
        <div class="container">
            <div class="row">
                <?php endif; ?>

This is my whole header.php

function add_this_script_footer(){ 
    wp_enqueue_script('jquery');

    // Internet Explorer HTML5 support
    wp_enqueue_script( 'html5hiv',get_template_directory_uri().'/js/html5.js', array(), '3.7.0', false );
    wp_script_add_data( 'html5hiv', 'conditional', 'lt IE 9' );

    // load bootstrap js
    wp_enqueue_script('suntrips-bootstrapjs', get_template_directory_uri() . '/js/bootstrap.min.js', array() );
    wp_enqueue_script('suntrips-themejs', get_template_directory_uri() . '/js/theme-script.js', array() );
    wp_enqueue_script( 'suntrips-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );

    wp_enqueue_script('angularjs', get_template_directory_uri() . '/js/angular.min.js', array() );
    wp_enqueue_script('suntrips-mainjs', get_template_directory_uri() . '/js/main.js', array() );
} 

add_action('wp_footer', 'add_this_script_footer');

This is in my functions.php

Hope anybody could find my mistake

Improve this answer

2 Comments

ng-repeat="theme in Destinations.theme", to begin with (no s !), see your data structure ;)
Thanks but no changes

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.